JQuery调用ajax方法

最新推荐文章于 2023-11-20 21:35:13 发布

顷之

最新推荐文章于 2023-11-20 21:35:13 发布

阅读量157

点赞数

文章标签： jquery ajax okhttp

本文链接：https://blog.csdn.net/m0_69101471/article/details/134366677

版权

1、ajax的简介

1）ajax是一种异步无刷新技术

2）同步：从上往下执行代码，在请求时，只有返回结果了，才能执行下面的代码。比如说，烧热水洗碗，只有等热水开了，才能洗碗。

3）异步：在发送请求之后，可以执行下面的代码，返回结果了在操作之前没完成的事。比如说，在烧热水时，可以去做接下来的要的事情，如扫地，热水开了，再去洗碗

2、Ajax方法

1）格式：$.ajax({})

2）参数：

--type：请求方式GET/POST 。大写小写都可以

--url：请求地址url

--async：是否异步，默认是true表示异步

--data：发送到服务器的数据，以json对象格式

--dataType：预期服务器返回的数据类型，如果返回的类型不是预定义的这种，会自动转为预定义的类型

--contentType：设置请求头

--success：请求成功时调用此函数

--error：请求失败时调用此函数

<body>
    <button>查看数据</button>
    <ul>
    </ul>
</body>
<script src="../js/jquery-3.6.1.min.js"></script>
<script>
    $('button').one('click',function(){
        $.ajax({
        type:'get',
        url:"../js/data.txt",
        data:{//请求数据，json对象
            uname:"zhangsan"  //如果没有参数，则不需要设置
        },
        dataType:'json',  //预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象,就不用写JSON.pare()
        //请求成功时调用的函数
        success:function(data){ //data是形参名，代表的是返回的数据
            // var obj=JSON.parse(data) //将字符串转换成json对象
            // console.log(obj);
            //遍历data
            $.each(data,function(index,user){
                var li=$('<li>'+user.userName+"  "+user.userAge+'</li>');
                $('ul').append(li)
            })
        }
    });
    })
    
</script>

data.txt文件

[
    {
        "userId":1,
        "userName":"zhangsan",
        "userAge":18
    },
    {
        "userId":2,
        "userName":"lisi",
        "userAge":20
    },
    {
        "userId":3,
        "userName":"wangwu",
        "userAge":19
    }
]

3、jQuery调用$.get()；

1）这是一个简单的GET请求功能以取代复杂 $.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax.

//1、请求json文件，忽略返回函数
$.get('js/XXXX.json');
//2、请求json文件，传递参数，忽略返回值
$.get('js/XXXX.json',{name:'tom',age:100})
//3、请求json文件，拿到返回值，请求成功后可拿到返回值
$.get('js/XXXX.json',function(data){
    console.log(data)
})
//4、请求json文件，传递参数，拿到返回值
$.get('js/XXXX.json',{name:'tom',age:100},function(data){
    console.log(data);
})

4、jQuery调用$.post()

与$.get()很像，只不过时post请求，把上面的get换post即可。不同的是请求参数所放位置，get请求会出现在url地址栏中，数据长度有限制。post请求在请求体中，相对安全

5、jQuery调用$.getJSON

1）表示请求返回的数据类型是json格式的ajax请求

$.getJSON('js/XXX.json',{name:'tom',age:100},function(data){
    console.log(data);  //要求返回的是数据格式是json格式
})

顷之

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery调用ajax方法

1）ajax是一种异步无刷新技术2）同步：从上往下执行代码，在请求时，只有返回结果了，才能执行下面的代码。比如说，烧热水洗碗，只有等热水开了，才能洗碗。3）异步：在发送请求之后，可以执行下面的代码，返回结果了在操作之前没完成的事。比如说，在烧热水时，可以去做接下来的要的事情，如扫地，热水开了，再去洗碗。
复制链接

扫一扫