jquery中的ajax请求

最新推荐文章于 2025-08-21 21:29:08 发布

登峰小蚁

最新推荐文章于 2025-08-21 21:29:08 发布

阅读量2.3k

点赞数

分类专栏： # Jquery 文章标签： jquery ajax

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了jQuery中的AJAX方法，包括load、get、post等常见方法的使用方式与示例，并详细解释了如何利用$.ajax()方法进行更灵活的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资源贴：load，get，post方法 http://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp

jquery的ajax()方法http://www.w3school.com.cn/jquery/ajax_ajax.asp

常用的ajax()方法https://blog.youkuaiyun.com/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（）方法，灵活的指定参数选项

常用方法：

<script>
    //把所有需要用到的地址归类到一个对象里
    var webUrl = {
        "show1Url": "{{ url('address/list1') }}",
        "show2Url": "{{ url('address/list2') }}",
        "show3Url": "{{ url('address/list3') }}"
    };

    function getData() {
        $.get(webUrl.show1Url,  //获取地址
            function(json){
                console.log(json);
             });
    }


    function postData(v1) {
        $.ajaxSettings.async = true;   //在这里设置同步或异步 默认为true(可不写)  false为同步

        $.post(webUrl.show2Url,   //获取地址
            {
                "id":v1          //需要传输的数据
            },
            function(json){
                console.log(json);
            });
    }

    function fullData(id) {
        $.ajax({              //  AJAX 请求设置。所有选项都是可选的。
            async:false,        //请求是同步或异步    默认为true  为true时不用写
            type: "POST",            //设置类型
            url: webUrl.show3Url,           //数据传输地址
            dataType: "json",               //获取的数据类型
            data: {"id":id},            //传参
            success: function (json) {      //请求成功之后调用
                // console.log(json);
                console.log(json);
            },
            error: function () {        //请求出错时调用
                console.log("请求失败");
            }
        })
    }


</script>