Ajax小结-CSDN博客

本文链接：https://blog.csdn.net/zhang964761032/article/details/6299200

Ajax小结

一、简单的Ajax请求
<script>
$(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);
   }
  });
});
});
</script>
<!—body部分-->
<body>
<input type="button" value="Ajax请求" />
</body>
二、Ajax请求jsp（传参数）
1、get请求
<script type="text/javascript">
$(function(){
  $("input[type='button']").bind("click",function(){
   /**Ajax的请求*/
   $.ajax({
    //请求的路径及所传的参数
    url:"user.jsp?name=kouxiaolin",
    //是否异步
    async:true,
    //请求的方法
    type:"get",
    //请求成功时调用
    success:function(msg){
    alert(msg);
    },
    //请求失败时调用
    error:function(msg){
    alert(msg);
    }
   });
  });
});
</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("kouxiaolin".equals(name)){
     out.print("用户名正确");
   }else{
     out.println("用户名错误");
   }
%>
2、post请求
<script>
$(function() {
//参数也可以在前面定义好，然后再后面调用
// var obj={name:"kouxiaolin",pass:"123"}; $("input[type='button']").bind("click", function() {
  /**Ajax的请求*/
  $.ajax( {
   //请求的路径
   url : "user.jsp",
   //是否异步
   async : true,
   //请求方式
   type : "post",
            //所传参数多个参数用&连接：data:"name=kouxiaolin&pass=123"
   data:"name=kouxiaolin",
   //data：obj,
   //请求成功时调用
   success : function(msg) {
    alert(msg);
   },
   //请求失败时调用
   error : function(msg) {
    alert(msg);
   }
  });
});
});
</script>
三、Ajax请求解析json
<script>
$(function() {
$("input[type='button']").bind("click", function() {
  /**Ajax的请求*/
  $.ajax( {
   //请求路径
   url : "user.html",
   //是否异步
   async : true,
   //请求的方法
   type : "get",
   //请求成功是调用
   success : function(msg) {
    alert(msg.name);//返回kouxiaolin
   },
   //请求失败时调用
   error : function(msg) {
    alert(msg);
   },
   //请求解析返回的类型是json类型
   dataType:"json"
  });
});
});
</script>
<!—user.html-->
{"name":"kouxiaolin","pass":"123"}
四、Ajax请求解析xml
<script>
$(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"
  });
});
});
</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请求
<script>
$(function() {
$("input[type='button']").bind("click", function() {
//get请求，里面stu.xml是请求路径，fun是回调方法，xml是回调的类型
  $.get("stu.xml",function(msg){
      alert(msg.documentElement.nodeName);
  },"xml");
});
});
</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>
六、Aja请求解析MyJsp.jsp
<script>
$(function() {
$("input[type='button']").bind("click", function() {
  /**Ajax的请求*/
  $.ajax( {
   //请求路径
   url : "MyJsp.jsp",
   //请求方法
   type : "get",
   //是否异步
   async : true,
   //请求成功时调用
   success : function(msg) {
    //获取返回的对象
    var dom = msg;
    //获取对象的跟标签
    alert(dom.documentElement.nodeName);
   },
        dataType : "xml"
  });
});
});
</script>
<!—MyJsp.jsp-->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    response.setHeader("Content-type","text/xml;charset=utf-8");
out.println("<students>");
out.println("<student>");
out.println("<name>kouxiaolin</name>");
out.println("<sex>女</sex>");
out.println("<age>22</age>");
out.println("</student>");
out.println("</students>");
%>