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>
my Code

 

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 %>
my Code2

 

jquery学习之1.23-ajax使用,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。