Knowledge Sharing.知識分享: 01/16/13

2013年1月16日星期三

JQuery getJson 用法

getJsonLoad.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function getFruits() {

    $.getJSON('../jsp/load_json.jsp', function(data) {

        $.each(data, function(key, val) {
            $("#fruitsBox").append('<option id="' + key + '">' + val + '</option>');
        });

    });
}
</script>
</head>
<body>
<select id = "fruitsBox"></select>

<button onclick ="getFruits()">get fruits</button> 
</body>
</html>

load_json.jsp

<%@ page contentType="text/html" import="org.json.* , java.io.*"%>
<%

    JSONObject obj = new JSONObject();
    obj.put("1", "apple");
    obj.put("2", "orange");
    obj.put("3", "pineapple");
    
    PrintWriter pw = response.getWriter();
    pw.print(obj.toString());
    
%>

Reference:JQuery getJson

用JQuery 或是 DOM 建立element

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<script src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">

function addOption(){
    
    var myComboBox = document.getElementById("myComboBox");
    var myOption = document.createElement("option"); 
    myOption.innerHTML = " Hello ";
    myComboBox.appendChild(myOption);
    
}

function addOptionByJq(){
    var myOption = document.createElement("option"); 
    myOption.innerHTML = " Hello by JQ ";
    $("#myComboBox").append(myOption)
    
    
}

</script>



<select id="myComboBox"></select>

<br>

<button onclick="addOption()">add a new option by dom manipulation</button>

<br>

<button onclick="addOptionByJq()"> add a new option by Jquery</button>

</body>
</html>

ReferenceJQuery append

JQuery load usage (JQuery load的使用方式)

load.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">

function getServerResponse(){
    $("#respone").load("../jsp/load.jsp");
}


</script>
</head>
<body>
<span id="respone"></span>
<button onclick ="getServerResponse()">get server response</button> 
</body>
</html>

load.jsp

<%@ page contentType="text/html" import="java.io.*"%>
<%
    PrintWriter pw = response.getWriter();
    pw.print("Hello");
%>

Reference jQuery - AJAX load() Method

Div and span introduction (介紹Div 和 span )

Div : 常常被使用在把一整個group的元件(elements), 套用到同一個css .:
Span: 則是使用在內部小部分元件上, 套用個別的css, 以下的例子結合div和span使用的方式 Reference :w3schools

Knowledge Sharing.知識分享

網頁

BloggerAds 廣告

熱門文章

標籤

搜尋此網誌

2013年1月16日星期三

JQuery getJson 用法

用JQuery 或是 DOM 建立element

JQuery load usage (JQuery load的使用方式)

Div and span introduction (介紹Div 和 span )

我的網誌清單

標籤

網誌存檔

總網頁瀏覽量

網頁

BloggerAds 廣告

熱門文章

標籤

搜尋此網誌

2013年1月16日 星期三

JQuery getJson 用法

用JQuery 或是 DOM 建立element

JQuery load usage (JQuery load的使用方式)

Div and span introduction (介紹Div 和 span )

我的網誌清單

標籤

2013年1月16日星期三