簡單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網站;

我的博客