Ajax请求小结 一、简单的Ajax请求 <mce:script type="text/javascript"><!-- $(function() { $("input[type='button']").bind("click", function() { /**Ajax的请求*/ $.ajax( { //请求的路径 url : "json.html", //是否异步 async : true, //请求的方法 type : "get", //请求成功时调用 success : function(msg) { alert(msg); }, //请求失败时调用 error : function(msg) { alert(msg); } }); }); }); // --></mce:script> <!—body部分--> <body> <input type="button" value="Ajax请求" /> </body> 二、Ajax请求jsp（传参数） 1、get请求 <mce:script type="text/javascript"><!-- $(function(){ $("input[type='button']").bind("click",function(){ /**Ajax的请求*/ $.ajax({ //请求的路径及所传的参数 url:"user.jsp?name=kxl", //是否异步 async:true, //请求的方法 type:"get", //请求成功时调用 success:function(msg){ alert(msg); }, //请求失败时调用 error:function(msg){ alert(msg); } }); }); }); // --></mce:script> <!—body部分--> <body> <input type="button" value="Ajax请求" /> </body> <!—user.jsp--> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String name = request.getParameter("name"); if("kxl".equals(name)){ out.print("用户名正确"); }else{ out.println("用户名错误"); } %> 2、post请求 <mce:script type="text/javascript"><!-- $(function() { //参数也可以在前面定义好，然后再后面调用 // var obj={name:"kxl",pass:"123"}; $("input[type='button']").bind("click", function() { /**Ajax的请求*/ $.ajax( { //请求的路径 url : "user.jsp", //是否异步 async : true, //请求方式 type : "post", //所传参数多个参数用&连接：data:"name=kxl&pass=123" data:"name=kxl", //data：obj, //请求成功时调用 success : function(msg) { alert(msg); }, //请求失败时调用 error : function(msg) { alert(msg); } }); }); }); // --></mce:script> 三、Ajax请求解析json <mce:script type="text/javascript"><!-- $(function() { $("input[type='button']").bind("click", function() { /**Ajax的请求*/ $.ajax( { //请求路径 url : "user.html", //是否异步 async : true, //请求的方法 type : "get", //请求成功是调用 success : function(msg) { alert(msg.name);//返回kxl }, //请求失败时调用 error : function(msg) { alert(msg); }, //请求解析返回的类型是json类型 dataType:"json" }); }); }); // --></mce:script> <!—user.html--> {"name":"kxl","pass":"123"} 四、Ajax请求解析xml <mce:script type="text/javascript"><!-- $(function() { $("input[type='button']").bind("click", function() { /**Ajax的请求*/ $.ajax( { //请求的路径 url : "stu.xml", //是否异步 async : true, //请求的方法 type : "get", //请求成功是调用 success : function(msg) { alert(msg.documentElement.nodeName);//返回的是students跟标签 }, //请求失败时调用 error : function(XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); alert(errorThrown); }, //请求解析返回的类型是xml dataType:"xml" }); }); }); // --></mce:script> <!—-stu.xml--> <?xml version="1.0" encoding="UTF-8"?> <students> <student> <name>redarmy_chen</name> <sex>man</sex> <age>28</age> </student> </students> 五、用get、post请求解析 1、get请求 <mce:script type="text/javascript"><!-- $(function() { $("input[type='button']").bind("click", function() { //get请求，里面stu.xml是请求路径，fun是回调方法，xml是回调的类型 $.get("stu.xml",function(msg){ alert(msg.documentElement.nodeName); },"xml"); }); }); // --></mce:script> 2、post请求 </script> $("input[type='button']").bind("click", function() { //post请求，里面stu.xml是请求路径，fun是回调方法，xml是回调的类型 $.post("MyJsp.jsp",function(msg){ alert("msg.documentElement.nodeName); },"xml"); }); }); </script>
扫一扫
7804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
