標籤：
ajax的定義：
AJAX即“A synchronous J avascript And X ML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。AJAX = 非同步 JavaScript和XML（標準通用標記語言 (SGML)的子集）。AJAX 是一種用於建立快速動態網頁的技術。通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。ajax的優勢：可以跨平台，可以實現無重新整理技術。 jquery的定義:jquery就是用javascript更加方便的查詢和控制頁面控制項。jquery優點：減少了代碼量 下面我們來看一個簡單的例子<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script src="js/jquery-1.7.2.js"></script></head><script type="text/javascript"> $(function(){ //按鈕單擊時執行 $("#testAjax").click(function(){ $.ajax({url:"index.jsp", success:function(data){ //alert(data); $("#myDiv").html(data); } } ); }); });</script> </head> <body> <div id="myDiv"><h2>通過 AJAX 改變文本</h2></div> <button id="testAjax" type="button">Ajax改變內容</button> </body></html>
我的那個url地址是另一個jsp頁面，代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@page import="java.text.SimpleDateFormat"%><%@page import="java.util.Date"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script src="js/jquery-1.7.2.js"></script><script src="js/jquery-ui-1.8.20.custom.min.js"></script><link href="css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet"/></head><style> tr,td{ border:1px solid; padding:10px; text-align:center; } #firstTable th{ border:1px solid; width:200px; } #firstTable{ position: relative; } #tableTwo{ display:none; position: absolute; left:500px; top:100px; background:white; } #div{ background-color:#E8E1CF; width:100%; height:100%; opacity: 0.6; position: fixed; display:none; }</style><% SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd"); String date=sdf.format(new Date()); session.setAttribute("date", date);%><body> <div id="div"></div> <div> <h3 style="text-align:center">借書卡管理系統</h3> <div><a href="#" style="margin-left:600px" id="add">新增借書卡</a> <a href="#" style="margin-left:50px" id="del">刪除借書卡</a> <a href="#" style="margin-left:50px" id="update">修改借書卡</a> <input placeholder="請根據姓名或者卡號進行查詢" size="30px" name="midSelect"/><button id="midSelect">模糊查詢</button></div> <table id="firstTable"> </table> </div> <form action="" method="post" name="addForm"> <table id="tableTwo"> <tr> <td colspan=2>借書卡資訊登記</td> </tr> <tr> <td>姓名:</td> <td><input name="name"/></td> </tr> <tr> <td>性別:</td> <td><input type="radio" checked value="男" name="sex"/>男<input type="radio" value="女" name="sex"/>女</td> </tr> <tr> <td>辦卡日期:</td> <td><input name="date" value="${date }"/>(yyyy-mm-dd)</td> </tr> <tr> <td>押金:</td> <td><select name="deposit"> <option value="100">100</option> <option value="200">200</option> <option value="300">300</option> <option value="400">400</option> </select> </td> </tr> <tr> <td colspan=2><input type="button" value="確認" id="confirm"/><input type="hidden" name="hide"/> <input type="button" value="取消" id="cancle"/></td> </tr> </table> </form></body><script> function load(param){ var msg=""; $.ajax({ url:"BookCardServlert", type:"post", data:param, dataType:"json", success:function(data){ msg+="<tr>"; msg+="<th><input type=‘checkbox‘id=‘all‘ onchange=‘selectAll()‘/>全選<input type=‘checkbox‘ id=‘opposite‘ onchange=‘notSelectAll()‘/>反選</th>"; msg+="<th>卡號</th>"; msg+="<th>姓名</th>"; msg+="<th>性別</th>"; msg+="<th>辦卡日期</th>"; msg+="<th>押金</th>"; msg+="</tr>"; if(data!=null){ for(var i=0;i<data.length;i++){ msg+="<tr>"; msg+="<td><input type=‘checkbox‘ name=‘id‘ value=‘"+data[i].cid+"‘</td>"; $.each(data[i],function(name,value){ msg+="<td>"+value+"</td>"; }); msg+="</tr>"; } }else{ msg+="<tr><td colspan=6><h3>沒有你要查詢的內容</h3></td></tr>"; } $("#firstTable").html(msg); } }); } load(); //模糊查詢 $("#midSelect").click(function(){ var param=$("input[name=‘midSelect‘]").serialize(); alert(param); load(param); }); //新增.修改 function add(type){ if($(addForm.name).val()!=""){ if($(addForm.name).val().length<7){ if($(addForm.date).val()!=""){ var text=$("input[name=‘date‘]").val(); if(text!=""){ var date=/^\d{4}-((0?[1-9])||1[1,2])-(([1,2]\d)||([0]?[1-9])||(3[0,1]))$/; if(date.test(text)){ var param=$(addForm).serialize(); //alert(param); $.ajax({ url:"addBookCard?type="+type, type:"post", data:param, success:function(data){ alert(data); load(); $("#tableTwo").hide(); $("#div").css("display","none"); $(addForm)[0].reset(); },error:function(data){ alert("載入不到資料"); alert("錯誤編碼："+data.status+",錯誤資訊"+data.statusText); }, timeout:1000 }); }else{ alert("日期格式錯誤"); } } }else{ alert("日期不可為空"); } }else{ alert("使用者名稱長度最多為7"); } }else{ alert("使用者名稱不可為空"); } } //修改 $("#update").click(function(){ //將被選中的多選框序列化 var param=$(":checkbox:checked").serialize(); //當參數不為空白的時候 if(param!=""){ if($(":checkbox:checked").length>1){ alert("一次只能修改一個"); } //將提交按鈕變成修改 $("#confirm").val("修改"); $("#tableTwo").show(); $("#div").css("display","block"); //擷取所有的td var $td=$(":checkbox:checked").not("#all").not("#opposite").eq(0).parent().siblings(); //alert($td[0].nodeName); $(addForm.name).val($td.eq(1).text()); $(addForm.sex).val([$td.eq(2).text()]); $(addForm.date).val($td.eq(3).text()); $(addForm.deposit).val([$td.eq(4).text()]); $(addForm.hide).val($td.eq(0).text()); }else{ alert("請選擇你要選擇的資料"); } }); //看是添加還是刪除 $("#confirm").click(function(){ if($("#confirm").val()=="確認"){ add("insert"); $(addForm)[0].reset(); }else if($("#confirm").val()=="修改"){ add("update"); } }); //刪除 $("#del").click(function(){ //擷取被選中的個數 var length=$("input[name=‘id‘]:checked").size(); if(length<=0){ alert("您還沒有勾選資料"); }else{ var check=$("input[name=‘id‘]:checked"); var param=check.serialize(); $.ajax({ url:"del", type:"post", data:param, success:function(data){ alert(data); load(); } }); } }); //全選 //var both=false; function selectAll(){ $("#opposite").prop("checked",false); var flag=$("#all").prop("checked"); $(":checkbox").not("#opposite").not("#all").prop("checked",flag); } //反選 function notSelectAll(){ //擷取所有的複選框 $("#all").prop("checked",false); var $check=$(":checkbox").not("#all").not("#opposite"); //alert($check.prop("checked")); for(var i=0;i<$check.length;i++){ if($check.eq(i).prop("checked")){ $check.eq(i).prop("checked",false); }else{ $check.eq(i).prop("checked",true); } } } $("#add").click(function(){ $("#tableTwo").show(); $("#confirm").val("確認"); $(addForm)[0].reset(); $("#div").css("display","block"); }); $("#cancle").click(function(){ $("#tableTwo").hide(); $("#div").css("display","none"); });</script></html>
通過例子我們可以更好的理解ajax的作用
下面我們來總結下
JQUERY：
$.ajax({
type:‘post‘,//可選get
url:‘action.jsp頁面‘,//路徑
data:data=param,//擷取的參數
dataType:"text",//伺服器返回的資料類型，可選XML,Json,script,html,text等
success:function(msg){
//這裡是ajax提交成功後，action或jsp返回的資料處理函數。msg是返回的資料，資料類型在dataType參數裡定義！
},error:function(){
ajax提交失敗的處理函數！
}})
ajax和jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
