jquery学习之1.23-ajax使用
jquery中ajax使用比传统ajax使用更加方便，快捷。直接使用jquery提供的方法，就可以实现。具体方法包括如下：
此处代码中使用了load，get方法为例子。ajax_jquery.jsp为登陆界面，loadController.jsp为服务器响应界面。具体代码如下：
ajax_jquery.jsp：
1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <title>11</title> 7 <script type="text/javascript" src="js/jquery-1.11.0.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 $("#login").click(function(){ 11 alert("hello"); 12 //load的get方式提交 13 /* 14 //第一个参数表示把ajax请求发送给url 15 //第二个参数表示是否发送数据data，如果不发，填null，如果你要发送，则key：value，以post方式提交 16 //第三个参数表示回调参数:1.data表示从服务器回送的数据 （string） 17 //2.textStatus表示状态有四个：success,error，notmodify,timeout 18 //xmlHttpRequest表示XMLHttpRequest对象 19 //**************get方式提交**************** 20 $("#one").load("loadController.jsp?name="+$("#name").val(),null,function(data,textStatus,xmlHttpRequest){ 21 //alert("服务器"+data); 22 $(this).text(data); 23 }); */ 24 25 //***************post方式提交*************** 26 /* var name_value=$("#name").val(); 27 var send_data={"name":""+name_value+""}; 28 $("#one").load("loadController.jsp",send_data,function(data,textStatus,xmlHttpRequest){ 29 $(this).text(data); 30 }); 31 */ 32 33 //********客户端发送json数据，服务器端返回json数据********* 34 /* var name_value=$("#name").val(); 35 var send_data={"name":""+name_value+""}; 36 $("#one").load("loadController.jsp",send_data,function(data,textStatus,xmlHttpRequest){ 37 var data_obj=eval('('+data+')'); 38 $(this).text(data_obj.res); 39 });*/ 40 41 //********客户端发送json数据，服务器端返回xml数据******** 42 /* var name_value=$("#name").val(); 43 var send_data={"name":""+name_value+""}; 44 $("#one").load("loadController.jsp",send_data,function(data,textStatus,xmlHttpRequest){ 45 var data_obj=eval('('+data+')'); 46 //取出xml格式数据,myXmlHttpRequest.responseXML是个xml dom对象 47 var result=xmlHttpRequest.responseXML.getElementsByTagName("mes"); 48 //mes是个list类型 mes[0]代表取出第一个节点，认为mes下面还有其他节点，所有需要用childNodes[0] 49 var mes_val=result[0].childNodes[0].nodeValue; 50 $(this).text(mes_val); 51 });*/ 52 53 //*******使用$.post方法************ 54 var name_value=$("#name").val(); 55 var send_data={"name":name_value}; 56 var xmlHttpRequest=$.post("loadController.jsp",send_data,function(data,ts){ 57 //1.如果服务器返回json 58 /*var objs=eval('('+data+')'); 59 $("#one").text(objs.res); 60 */ 61 62 63 //2.如果服务器返回text 64 /* $("#one").text(data);*/ 65 //3.如果服务器返回是xml ,备注：此时xmlHttpRequest不存在 66 //备注：post方法可以不依赖某个jquery对象，但是load方法需要一个jquery对象来展示 67 var xmlObj=xmlHttpRequest.responseXML; 68 var result=xmlObj.getElementsByTagName("mes"); 69 //mes是个list类型 mes[0]代表取出第一个节点，认为mes下面还有其他节点，所有需要用childNodes[0] 70 var mes_val=result[0].childNodes[0].nodeValue; 71 $("#one").text(mes_val); 72 73 74 75 }); 76 }); 77 78 }); 79 </script> 80 </head> 81 <body> 82 <form> 83 <input type="text" id="name" name="name" value="请输入用户名" ></input> 84 <input type="text" id="pass" value="请输入密码" ></input> 85 <input type="button" id="login"value="登陆"></input> 86 </form> 87 88 <div id="one"> 89 </div> 90 </body> 91 </html>
loadController.jsp:
1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <% 4 //告诉服务器不缓存数据 5 response.setHeader("Cache-Control", "no-cache"); 6 //此处写text/xml一定不要写错 7 response.setHeader("Content-type","text/xml"); 8 String name=request.getParameter("name"); 9 System.out.println("获取的name="+name); 10 if(name.equals("watermelon")) 11 { 12 //out.print("用户名不可以使用"); 13 //out.print("{'res':'用户名不可以使用'}"); 14 out.print("<res><mes>用户名不可以用，对不起</mes></res>"); 15 } 16 else 17 { 18 //out.print("用户名可以使用"); 19 //out.print("{'res':'用户名可以使用'}"); 20 out.print("<res><mes>用户名可以用，恭喜</mes></res>"); 21 } 22 23 %>
