简单jquery AJAX 请求数据

简单jquery AJAX 请求数据

前端请求网络数据的方式很多, 例如ajax、axios、fetch ,而三种请求方式的方法各不相同,但是也各有优势

早期的绝大部分项目都是使用 ajax 进行数据的传输的, 而原生ajax的传输是比较繁琐的, 所以就有了jquery封装的 ajax,下面介绍一下 jquery的ajax的简单使用方法

ajax 提交表单(post)

<form id="form">
    <div><label>姓名 : <input type="text" name="name"></label></div>
    <div><label>电话 : <input type="text" name="phone"></label></div>
    <div>
        性别 :
        <label><input type="radio" name="sex" value="男">男</label>
        <label><input type="radio" name="sex" value="女">女</label>
    </div>
    <div><button>点击提交</button></div>
</form>
<p>接收到的数据</p>
<div><span>姓名 : </span><span id="name"></span></div>
<div><span>电话 : </span><span id="phone"></span></div>
<div><span>性别 : </span><span id="sex"></span></div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js "></script>
<script>
    $("button").click(function () {
        $.ajax({
            type: "post",   //请求类型
            dataType: "json",   //请求数据返回类型
            url: "https://aliyun.firehua.top/admin/json_data/sent_data",    //请求地址
            data: $('#form').serialize(),       //表单序列化
            success: function (result) {        //成功
                console.log(result);
                if (result.code === 200) {
                    console.log(result);
                    console.log("成功");
                    $("#name").text(result.data.name);
                    $("#phone").text(result.data.phone);
                    $("#sex").text(result.data.sex);
                } else {
                    console.log(result);
                    console.log("失败");
                }
            },
            error: function (result) {      //失败
                console.log(result);
                console.log("异常");
            }
        });
        return false;           //禁止from默认提交行为
    })

ajax 请求页面数据渲染(post)

<div id="box"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js "></script>
<script>
    // https://aliyun.firehua.top/admin/json_data/test_json
    $.ajax({
        type: "post",
        dataType: "json",
        url: "https://aliyun.firehua.top/admin/json_data/test_json",
        async: true,            //同步或者异步 ,ajax 就是为了异步而生
        data: {"type": "2"},
        success: function (result) {
            if (result.code === 200) {
                console.log(result);
                let data = result.data;
                // console.log(data.img);
                // console.log(data.str);
                // console.log(data.url.search);
                let box = document.querySelector("#box");
                for (value in data.img) {
                    console.log(value);
                    for (let i = 0; i < data.img[value].length; i++) {
                        console.log(data.img[value]);
                        box.innerHTML += `<div>${value} <p><img src="${data.img[value][i]}" alt="${value}" style="width: 100px;"></p></div>`
                    }
                }
                for (let value in data.str) {
                    // console.log(value);
                    // console.log(data.str[value]);
                    box.innerHTML += `<p><span style="color: red">${value} </span> ${data.str[value]}</p>`
                }
                let search = data.url.search;
                for (value in search) {
                    // console.log(search[value]);
                    // console.log(value);
                    box.innerHTML += `<p><a href="${search[value]}">${value}</a></p>`
                }
            }
        },
        error: function (result) {
            console.log(result);
            console.log(result.message);
        }
    })
</script>

ajax 请求页面数据渲染(get)

<button>点击提交</button>

<p>接收到的数据</p>

<div><span>姓名 : </span><span id="name"></span></div>
<div><span>时间 : </span><span id="time"></span></div>
<div><span>文本 : </span><span id="text"></span></div>
<div><span>图片1 : </span><img id="img1" src=""></div>
<div><span>图片2 : </span><img id="img2" src="" width="100px"></div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js "></script>
<script>
    $("button").click(function () {
        $.ajax({
            type: "get",   //请求类型
            dataType: "json",   //请求数据返回类型
            url: "https://api.apiopen.top/getSingleJoke",    //请求地址
            data: {"sid": "28654780"},      //传参
            success: function (result) {        //成功
                if (result.code === 200) {
                    console.log(result);
                    console.log("成功");

                    $("#name").text(result.result.name);
                    $("#time").text(result.result.passtime);
                    $("#text").text(result.result.text);
                    $("#img1").attr("src", result.result.header);
                    $('#img2').attr("src", result.result.thumbnail);

                } else {
                    console.log(result);
                    console.log("失败");
                }
            },
            error: function (result) {      //失败
                console.log(result);
                console.log("异常");
            }
        });
    })
</script>

开源api网站;

个人博客