<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function() {
$('#buttonLoad').click(function() {
//練習一使用load()載入jQueryEffects.html網頁中的img1圖片
//load()用於靜態網頁
$("#show").load("jQueryEffects.html #img1")
//在id=show的標籤中放入jQueryEffects.html中id=img的東西
});
$('#buttonGet').click(function() {
//練習二使用get()
//1. 呼叫Parameter.jsp
//2. 傳 name=Jack及age=30的資料給Parameter.jsp
//3. 將Server端回傳的結果加上h2的標籤,顯示在show的div中
$.get("Parameter.jsp", {
"name" : 'Jack',
"age" : 20
}, function(data) {
$("#show").html("<h2>" + data + "</h2>")
})
});
$('#buttonPost').click(function() {
//練習三使用post()
//1. 呼叫Parameter.jsp
//2. 傳 name=Mary及age=的25資料給Parameter.jsp
//3. 將Server端回傳的結果加上h2的標籤,顯示在show的div中
//4. 跟get完全一樣，不一樣的地方JQ幫你做好了
$.post("Parameter.jsp", {
name : 'Mary',
age : 22
}, function(data) {
$("#show").html("<h2>" + data + "</h2>")
})
// 換成ajax的寫法：
$.ajax({
url : "Parameter.jsp",
type : "get",
data : {
name : 'Mary',
age : 22
},
success : function(data) {
$("#show").html("<h2>" + data + "</h2>")
}
});
});
$('#select1').change(
function() {
//練習四使用getJSON()
//1. 呼叫Products?categoryID=2
//2. 將Server端回傳的結果顯示在id為productTable的table中
var tb = $("#productTable>tbody")
tb.empty()
$.getJSON("Products",//指定Products.java
{categoryID : $(this).val()},//要傳入的data
//↑java中有這一行：String categoryID = request.getParameter("categoryID");
function(datas) {
//↑datas是回程的資料，是json
//收到的資料是[{}{}{}]
var flag = $(document.createDocumentFragment());
//document.createDocumentFragment()是一個JS的方法，可以做出一個暫時的容器，把東西放在裡面等each跑完之後再把東西放到flag中
//這樣就不會有一堆DOM來影響效能
//比如先把東西裝在小貨櫃，再一次放進大貨櫃，而不是每次放都要打開大貨櫃
$.each(datas, function(idx, product) {
var cell1 = $("<td></td>").text(
product.ProductID)
var cell2 = $("<td></td>").text(
product.ProductName)
var cell3 = $("<td></td>").text(
product.UnitPrice)
var cell4 = $("<td></td>").text(
product.UnitsInStock)
var row = $("<tr></tr>").append(
[ cell1, cell2, cell3, cell4 ])
flag.append(row);
})
tb.append(flag)
})
// ------------------------------------------------------------------
// 以下是ajax的寫法，任何json可以寫的其實都來自於他
// $.ajax({
// "type":"get",
// "url":"Products",
// "dataType":"json",
// "data":{categoryID:$(this).val()},
// "success":function(datas){
// //收到的資料是[{}{}{}]
// var flag = $(document.createDocumentFragment());
// //document.createDocumentFragment()是一個JS的方法，可以做出一個暫時的容器，把東西放在裡面等each跑完之後再把東西放到flag中
// //這樣就不會有一堆DOM來影響效能
// $.each(datas,function(idx,product){
// var cell1 = $("<td></td>").text(product.ProductID)
// var cell2 = $("<td></td>").text(product.ProductName)
// var cell3 = $("<td></td>").text(product.UnitPrice)
// var cell4 = $("<td></td>").text(product.UnitsInStock)
// var row = $("<tr></tr>").append([cell1,cell2,cell3,cell4])
// flag.append(row);
// })
// tb.append(flag)
// }
// })
});
$('#buttonAjax').click(
function() {
//練習五使用ajax()
//清除select1中的option
//1. 呼叫XMLServlet
//2. 將回傳的XML資料加到select的標籤中
//資料類型不是json，所以只能直接用ajax
$.ajax({
"type" : "get",
"url" : "XMLServlet",
"dataType" : "xml",
"data" : {},
"success" : function(datas) {
var categories = $(datas).find("Category");//在回傳的的資料中找Category
var flag = $(document.createDocumentFragment());
categories.each(function() {
var categoryName = $(this).children("CategoryName").text();//取得節點的內容
var categoryId = $(this).children("CategoryID").text();
var opt = $("<option></option>").text(categoryName).val(categoryId)
//把之前取的東西放進option中
flag.append(opt);
})
$('#select1').empty();//清空重來
$('#select1').append(flag)
}
})
});
//練習六 顯示server端的程式正在執行
$('#img1').hide();
$(document).ajaxStart(function() {
$('#img1').show(500);
}).ajaxStop(function() {
$('#img1').hide(500);
})
});
</script>
留言列表
【前端網頁開發技術】 (4)
