Apakah cara untuk berinteraksi dengan Jquery?

青灯夜游
Lepaskan: 2023-01-04 09:15:45
asal
2575 orang telah melayarinya

Kaedah interaksi Jquery ialah: 1. Muatkan kaedah, muatkan data dari pelayan dan masukkan data yang dikembalikan ke dalam elemen yang dipilih 2. Kaedah GET, minta data daripada pelayan melalui permintaan HTTP GET 3 , POST; kaedah, yang meminta data daripada pelayan melalui permintaan HTTP POST;

Apakah cara untuk berinteraksi dengan Jquery?

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.

6 cara untuk berinteraksi dengan jquery ajax depan dan belakang

Yang pertama: muat, muat data dari pelayan dan pulangkan ia Letakkan data ke dalam elemen yang dipilih

<script type="text/javascript">
$(document).ready(function(){
    $("#mybutton").click(function(){
        $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success"){
                alert("成功");
            }
            if(statusTxt=="error"){
                alert("失败:"+xhr.status+":"+xhr.statusTxt);
            }
        });
    });
})
</script>
Salin selepas log masuk
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,  
加载到指定的 <div> 元素中:
实例:
$("#div1").load("demo_test.txt #p1");
Salin selepas log masuk

Kedua: Kaedah GET:

$(document).ready(function(){
    $("#mybutton").click(function(){
        $.get("haha.txt",null,function(data,status){   
            alert(data+":"+status);
        });
    });
});
Salin selepas log masuk

Kaedah ketiga: Kaedah POST:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.get("/Json/JsonServlet", {
                name:"我是谁",
                age:12
            }, function(data, status) {
                alert(data + ":" + status);
            });
        });
    });
</script>
Salin selepas log masuk

POST要和后台Servlet交互:

response.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));
        response.getWriter().println("你找到我了");
Salin selepas log masuk

Keluaran latar belakang:

我是谁
12
Salin selepas log masuk

Untuk mengakses servlet latar belakang, anda juga boleh terus menulis alamat seperti ini:

$.get("JsonServlet",
Salin selepas log masuk

Cara keempat: kaedah getJSON:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.getJSON("JsonServlet", {
                name:"我是谁",
                age:12
            }, function(json) {
                alert(json.name);
                $("#mydiv").html(json.name);
            });
        });
    });
</script>
Salin selepas log masuk

mengembalikan objek dalam format json secara langsung, tanpa penukaran kaedah JSON.parse.

Nota: Tidak kira cara latar belakang berinteraksi dengan bahagian hadapan, terdapat dua cara:

Interaksi latar belakang pertama: menyambung rentetan secara langsung.

response.getWriter().  
print("{\"name\":\"爱你\",\"age\":12}");
Salin selepas log masuk

Jenis kedua objek JSON masuk:

JSONObject jsonObject =  
new JSONObject("{&#39;name&#39;:&#39;爱你&#39;,&#39;age&#39;:12}");
response.getWriter().print(jsonObject);
Salin selepas log masuk

Apabila perkara yang sama akhirnya dihantar ke meja depan, ia akan menjadi dalam bentuk rentetan secara lalai. Hantarkannya,
Ambil perhatian bahawa selain daripada kaedah getJSON , bahagian hadapan boleh menggunakan dua kaedah untuk menukar rentetan kepada objek js:

1. eval()函数  :不推荐,有隐患 会执行其他js操作
2. JSON.parse()函数 :推荐:只执行对象转换操作
Salin selepas log masuk

Adakah anda masih ingin bertanya jika ada lima jenis?

Ya, ada satu lagi:

Jenis kelima: jQuery.ajax():

执行异步 HTTP (Ajax) 请求

Kaedah ini ialah pelaksanaan AJAX yang mendasari jQuery Semua kaedah AJAX jQuery menggunakan kaedah ajax(). . Untuk pelaksanaan peringkat tinggi yang ringkas dan mudah digunakan, lihat .get,

Atas ialah kandungan terperinci Apakah cara untuk berinteraksi dengan Jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan