Bagaimana jquery melaksanakan permintaan Ajax

Kaedah untuk jquery melaksanakan permintaan Ajax: 1. Kaedah "$.ajax()"; 2. Kaedah "$.post()", kod ialah "$.post(url, data, func, dataType) ;"; 3. Kaedah "$.get()", kodnya ialah "$.get(url, data, func, dataType);"; 4. kaedah "$.getJSON()", dsb.

Sistem pengendalian untuk tutorial ini: Sistem Windows 10, versi jQuery 3.6.0, komputer Dell G3.

jquery melaksanakan permintaan Ajax

Ajax digunakan untuk komunikasi antara penyemak imbas dan pelayan tanpa memuatkan semula keseluruhan halaman halaman, tetapi Ia mengembalikan sebahagian daripada data dan mengemas kini nod melalui operasi DOM JavaScript. Format penghantaran data termasuk xml, json dan format lain, tetapi yang paling biasa digunakan ialah format json.
Kita boleh menggunakan objek JavaScript XMLHttpRequest untuk melaksanakan Ajax asli, tetapi kaedah ini lebih rumit dan sukar untuk ditulis. jQuery telah merangkumkan Ajax, menjadikannya lebih mudah untuk memulakan permintaan Ajax Artikel ini memperkenalkan secara ringkas proses jQuery melaksanakan Ajax:

1 Perkenalkan fail jquery.js

 <script src="https://code.jquery.com/jquery-3.6.1.js"></script>

2. Beberapa kaedah jQuery Ajax

(1) $.ajax() ①url: alamat pautan, rentetan Mewakili
②data: (pilihan) Data yang akan dihantar ke pelayan, GET dan POST, akan ditukar secara automatik ke dalam format rentetan permintaan, dinyatakan dalam bentuk pasangan Kunci/nilai dan akan dilampirkan pada permintaan sebagai QueryString Dalam URL, formatnya ialah {A: '…', B: '…'}
③type: "POST" or "GET", request type
④timeout: request timeout, unit is miliseconds, value menunjukkan
⑤cache: sama ada untuk cache hasil permintaan, bool bermaksud
⑥contentType: jenis kandungan, lalai ialah "application/x-www-form-urlencoded"
⑦dataType: jenis data respons pelayan, perwakilan rentetan; apabila diisi sebagai json , tidak perlu menyahsiri data ke dalam json dalam fungsi panggil balik
⑧success: fungsi dipanggil semula oleh pelayan selepas permintaan berjaya
⑨ralat: fungsi dipanggil semula oleh pelayan selepas permintaan gagal
⑩lengkap: dipanggil selepas permintaan selesai fungsi, sama ada permintaan berjaya atau gagal, fungsi ini akan dipanggil jika fungsi kejayaan dan ralat ditetapkan, fungsi akan dipanggil selepas mereka ⑫nama pengguna: nama pengguna yang dibawa dalam permintaan pengesahan akses, perwakilan rentetan
⑬kata laluan: Mengembalikan kata laluan yang dibawa dalam permintaan pengesahan, rentetan mewakili

 <script type="text/javascript">
        function login1(){
            $.ajax({
                //${pageContext.request.contextPath}用于取后端方法的绝对路径的项目名
                url: "${pageContext.request.contextPath}/user/returnJson",
                type: "GET",
                data:'{name: 'James'}', //必须是字符串格式
                contentType:"application/json", //指定内容格式
                dataType:json,
                success: function(data) {  //括号里的data是服务器返回的数据
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            });
        }
    </script>

<script>
    $('#btn1').click(function () {
        $.ajax({
            type:"post",	//提交方式
            url:'${pageContext.request.contextPath}/JSONServlet',
            data:{
                bookname:  $("#bookname").val()//val() 方法返回或设置被选元素的值。
            },
            dataType: "json",   	//返回数据的格式
            success:function (responseData) {
                var html = "";
                $('#dataTable tr:not(:first)').remove(); //删除第一行之外的所有行
                // $('#dataTable > tbody > tr').remove();   // 删除所有行，表头会被删除
                console.log(responseData);
                for (var i = 0; i < responseData.length; i++) {
                    html += &#39;<tr>';
                    html += '<td>'+responseData[i].bookid+'</td>'+'<td>'+responseData[i].bookname+'</td>'+'<td>'+responseData[i].price+'</td>'
                    html += '</tr>';
                }
                $('#dataTable').append(html);
            },
        });
    });
</script>

(2) $.post()

Gunakan kaedah POST untuk melaksanakan permintaan Ajax daripada pelayan Muatkan data. Format: $.post(url, data, func, dataType);

Parameter pilihan:

①url: alamat pautan, perwakilan rentetan
②data: data yang perlu dihantar ke pelayan, dalam format {A: '…', B: '…'}
③func: Fungsi dipanggil semula oleh pelayan selepas permintaan berjaya (data, status, xhr), di mana data ialah data yang dikembalikan oleh pelayan dan status ialah status respons. xhr ialah objek XMLHttpRequest Secara peribadi, anda boleh fokus pada parameter data
④dataType: Format data yang dikembalikan oleh pelayan

<script type="text/javascript">
        function login2(){
            $.post(
                "${pageContext.request.contextPath}/user/returnJson",
                 '{name: 'James'}',
                  "application/json",
                 function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

(3) $. get()

gunakan kaedah GET melaksanakan permintaan Ajax dan memuatkan data daripada pelayan. Borang: $.get(url, data, func, dataType);

rreee

(4)$.getJSON()

Borang: $.getJSON (url, data, func); Gunakan kaedah GET untuk melaksanakan permintaan Ajax dan memuatkan data format JSON daripada pelayan.

<script type="text/javascript">
        function login3(){
            $.get(
                "${pageContext.request.contextPath}/user/returnJson",
                function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

Nota: Oleh kerana format data yang dikembalikan oleh pelayan ditentukan sebagai json, tidak ada keperluan untuk menentukan dataType dalam kaedah ini.

(5) $.load()

Masukkan data yang dimuatkan oleh pelayan terus ke dalam nod dalam DOM yang ditentukan. Format: $.load(url, data, func);

Jika data wujud, permintaan akan dihantar menggunakan POST, jika tidak wujud, permintaan akan dihantar menggunakan GET.

rreeee

Atas ialah kandungan terperinci Bagaimana jquery melaksanakan permintaan Ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!