Jquery之ajax交互

一个佛系的小白

于 2021-09-25 22:54:13 发布

阅读量241

点赞数

分类专栏：前端文章标签： ajax jquery

本文链接：https://blog.csdn.net/weixin_46285310/article/details/120479311

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。

ajax交互分为四步
　　1）填写地址
　　2）返回结果
　　3）解析结果
　　4）展示数据

举个栗子来尝试一下：

$('btn').click(function(){
            $.ajax({
            type:"get", //请求方式
            url:"./js/data.txt",
            dataType:'JSONP',//防止阻止跨域请求
            data:{
                // 请求的数据 没有参数不需要设置
                
            },
            // 对象才有作用域，外面的data和这个data没有联系，因为下面这个data只是一个形参 返回的数据
            // 请求成功调用的函数
            success:function(data){
                console.log(data);
                // 将字符串转换为json对象
                // var obj = JSON.parse(data);
                // console.log(obj);

                // 1.dom操作 创建元素 复习
                var ul = $("<ul></ul>");
                // 2.遍历返回的数组
                for(var i = 0; i < data.length; i++){
                    var user = data[i];
                    // 3.创建li元素
                    var li = "<li>"+user.userName+"</li>"
                    // 4.将li元素设置到ul元素中
                    ul.append(li);
                }
                // 5.将ul设置到body中
                $("body").append(ul);
                
            }
        });
    });

        // 点击按钮,发送ajax请求,将数据显示到页面中
        $.ajax({
            type:"get", //请求方式
            url:"./js/data.json",
            dataType:'JSONP',//防止阻止跨域请求
            data:{
                // 请求的数据 没有参数不需要设置
                uname:"zhansan"
            },
            dataType:"json", //预期返回的数据类型 在接收到返回值得时候会自动封装成json对象
            // 对象才有作用域，外面的data和这个data没有联系，因为下面这个data只是一个形参 返回的数据
            // 请求成功调用的函数
            success:function(data){
                console.log(data);
                // 将字符串转换为json对象
                var obj = JSON.parse(data);
                console.log(obj);
                
            }
        });

数据:

[
    {
        "userId": 1,
        "userName": "zhansan",
        "userAge": "18"
    },
    {
        "userId": 1,
        "userName": "zhansan",
        "userAge": "18"
    },
    {
        "userId": 1,
        "userName": "zhansan",
        "userAge": "18"
    },
    {
        "userId": 1,
        "userName": "zhansan",
        "userAge": "18"
    }
]