What are the ways to interact with Jquery?

The Jquery interaction methods are: 1. load method, which loads data from the server and puts the returned data into the selected element; 2. GET method, which requests data from the server through HTTP GET request; 3 , POST method, which requests data from the server through HTTP POST request; 4. getJSON method, which returns an object in json format directly; 5. jQuery.ajax() method; 6. Partial refresh method of the form attached to the form.

The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.

6 ways of jquery ajax front-end and back-end interaction

The first one: load, load data from the server and return it Put the data into the selected element

<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>

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，  
加载到指定的 <div> 元素中：
实例：
$("#div1").load("demo_test.txt #p1");

Second: GET method:

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

Third method: POST method:

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

POST needs to interact with the background Servlet:

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

Background output:

我是谁
12

To access the background servlet, you can also directly write the address like this:

$.get("JsonServlet",

Fourth: getJSON method:

<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>

The returned object is directly in json format, without JSON.parse method conversion.

Note: No matter which method is used, there are two ways for the background to interact with the front desk:

The first background interaction: directly splicing strings.

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

The second type of incoming JSON object:

JSONObject jsonObject =  
new JSONObject("{'name':'爱你','age':12}");
response.getWriter().print(jsonObject);

When the same thing is finally passed to the front desk, it will be passed in the form of a string by default,
Note that in addition to the getJSON method, the front desk can use two methods to convert strings into js objects:

1. eval（）函数  ：不推荐，有隐患 会执行其他js操作
2. JSON.parse（）函数 ：推荐：只执行对象转换操作

Do you still want to ask if there are five kinds? Why? Just talked about four kinds?

Yes, there is another one:

The fifth type: jQuery.ajax():

Execution Asynchronous HTTP (Ajax) request

This method is the underlying AJAX implementation of jQuery. All jQuery AJAX methods use the ajax() method. . For simple and easy-to-use high-level implementation, see .get$.get,$

The above is the detailed content of What are the ways to interact with Jquery?. For more information, please follow other related articles on the PHP Chinese website!