jquery中的ajax请求

迷南。 2022-05-17 09:08 246阅读 0赞

资源贴：load，get，post方法 [http://www.w3school.com.cn/jquery/jquery\_ajax\_get\_post.asp][http_www.w3school.com.cn_jquery_jquery_ajax_get_post.asp]

jquery的ajax()方法[http://www.w3school.com.cn/jquery/ajax\_ajax.asp][http_www.w3school.com.cn_jquery_ajax_ajax.asp]

常用的ajax()方法[https://blog.csdn.net/freedomvenly/article/details/79172832][https_blog.csdn.net_freedomvenly_article_details_79172832]

1、load(url, data, callback)方法

url：请求链接

data：请求数据

callback：回调方法  参数如下

*  *responseTxt* \- 包含调用成功时的结果内容
 *  *statusTXT* \- 包含调用的状态
 *  *xhr* \- 包含 XMLHttpRequest 对像

实例1：直接将load出来的数据放到id为test的元素中

$('#test').load('/example/jquery/demo_test.txt');
    <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>

实例2：callback函数

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success")
          alert("外部内容加载成功！");
        if(statusTxt=="error")
          alert("Error: "+xhr.status+": "+xhr.statusText);
      });

2、get/post方法

2.1 $.get(url,callback)

url:请求链接

callback：回调函数 参数data：返回数据， status：请求状态码

实例：

$("button").click(function(){
      $.get("demo_test.asp",function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
      });
    });

2.2 $.post(url, data, callback)

url：请求链接

data：请求数据

callback：回调函数 参数data：返回数据 status：请求状态码

$("button").click(function(){
      $.post("demo_test_post.asp",
      {
        name:"Donald Duck",
        city:"Duckburg"
      },
      function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
      });
    });

3、 如果以上封装好的方法不能满足需求，可以用jquery的ajax（）方法，灵活的指定参数选项

常用方法：

[http_www.w3school.com.cn_jquery_jquery_ajax_get_post.asp]: http://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp
[http_www.w3school.com.cn_jquery_ajax_ajax.asp]: http://www.w3school.com.cn/jquery/ajax_ajax.asp
[https_blog.csdn.net_freedomvenly_article_details_79172832]: https://blog.csdn.net/freedomvenly/article/details/79172832