jQuery中的ajax

最新推荐文章于 2025-08-12 15:10:50 发布

黑猫中校

最新推荐文章于 2025-08-12 15:10:50 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery ajax js

本文链接：https://blog.youkuaiyun.com/tang1392/article/details/78766383

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了jQuery库中的四种常用AJAX方法：load(), post(), get() 和 $.ajax() 的使用方式及示例。通过实例展示了如何利用这些方法进行数据加载、处理及与服务器交互。

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

常用的jq-ajax方法通常有以下四种：

1、$.load();

2、$.post();

3、$.get();

4、$.ajax()；

那么，我们开始学习这四种方法。

首先引入jq文件：

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

1、load（）

$(selector).load(URL,data,callback);

从服务器加载数据，并把返回的数据放入被选元素中。

$("#divTip1").load('test.txt',function (responseTxt,statusTxt,xhr) {
                console.log(responseTxt);
                console.log(statusTxt);
                console.log(xhr);
            })

txt文档：

it is just test data!

2、post（）

$.post('test.txt',function(data,status){
              console.log(data);
              console.log(status);
            })

3、get（）

$.get('test.txt',function(data,status){
              console.log(data);
              console.log(status);
            })

4、ajax（）

$.ajax({
                url:"test.json",
                type:"POST",
                async:true,
                dataType:"json",
                beforeSend:function(xhr){
                    console.log(xhr);
                    console.log('发送前')
                },
                success:function(data,textStatus,jqXHR){
                    console.log(data);
                    console.log(textStatus);
                    console.log(jqXHR);
                    var name = "";
                    for(i in data){
                        name +="姓名：" + data[i].name +"<br/>";
                        name +="性别：" + data[i].sex +"<br/>";
                    }
                    $("#divTip").html(name);
                },
                error:function(xhr,textStatus){
                    console.log('错误');
                    console.log(xhr);
                    console.log(textStatus)
                },
                complete:function(){
                    console.log('结束')
                }
            })

json数据：

[{
  "name":"黑猫",
  "id":124512,
  "address":"成都市武侯区五大花园",
  "age":24,
  "sex":"man"
},{
  "name":"白猫",
  "id":1241412,
  "address":"成都市武侯区晋阳街",
  "age":23,
  "sex":"woman"
}]

还有其他比如说getJSON、全局函数getscript等，就不详细叙述了，其实大同小异，在做好ajax的时候做好返回数据处理就好了