Jquery交互的方式都有哪些

时间：2023-01-03 19:03

Jquery交互的方式有：1、load方式，从服务器加载数据，并把返回的数据放入被选元素中；2、GET方式，通过HTTP GET请求从服务器请求数据的；3、POST方式，通过HTTP POST请求从服务器请求数据的；4、getJSON方式，返回的就直接是json格式的对象；5、jQuery.ajax()方式；6、依附于表单的表单的局部刷新方式。

本教程操作环境：windows7系统、jquery3.6版本、Dell G3电脑。

jquery ajax前后台交互的6种方式

第一种：load，从服务器加载数据，并把返回的数据放入被选元素中

<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");

第二种：GET方式：

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

第三种：POST方式：

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

POST要和后台Servlet交互：

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

后台输出：

我是谁
12

要访问后台servlet也可以直接如此写地址：

$.get("JsonServlet",

第四种：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>

返回的就直接是json格式的对象，无需JSON.parse的方法转换。

注意：不管是哪种方式后台都有两种方式和前台交互：

第一种后台交互：直接拼接字符串。

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

第二种传入JSON对象：

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

相同的最终传递给前台的时候都默认以字符串的形式传递过去，
注意的是除了getJSON方式 前台可以使用两种方式来将字符串转换成js对象：

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

你们是不是还要问不是有五种吗为啥子前面就讲了四种？

没错还有一种：

第五种：jQuery.ajax()：

执行异步 HTTP (Ajax) 请求

该方法是 jQuery 底层 AJAX 实现，所有的 jQuery AJAX 方法都使用 ajax() 方法。。简单易用的高层实现见 .get.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

可以这么理解：

前四种是高级方法，是对ajax（）进行了封装，更加简洁。可以理解为Jquery和JavaScript之间的关系。

$.ajax的一般格式

$.ajax({

 type: 'POST',

 url: url ,

data: data ,

success: success ,

dataType: dataType

});

$.ajax的参数描述

参数 描述
url 必需。规定把请求发送到哪个 URL。
data    可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)    可选。请求成功时执行的回调函数。
dataType    
可选。规定预期的服务器响应的数据类型。

默认执行智能判断（xml、json、script 或 html）。

举例：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.ajax({
                url : "/Json/JsonServlet",
                type : "POST",
                async : true,
                dataType : "json",
                data : {
                    name : "前台数据",
                    age : 12
                },
                success : function(result) {
                    $("#mydiv").html(result.name);
                },
                error : function(xhr) {
                    alert("错误提示： " + xhr.status + " " + xhr.statusText);
                }
            });
        });
    });
</script>

后台：

        request.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));

后台输出：

前台数据
12

注意：
data还可以用字符串拼接：一样的效果多个参数中间要用&分割

data : "name=前台数据string&age=12",

那什么时候使用呢？

$.post、$.get是一些简单的方法，  
如果要处理复杂的逻辑，还是需要用到jQuery.ajax()

该方法通常用于其他方法不能完成的请求，比如网址错误。

如果是表单提交的可以参照我开头最后一个链接

方法六：表单的局部刷新（依附于表单）

序列化表单方法：

serialize():将表单内容序列化成一个字符串。

serializeArray()：将表单内容序列化成一个对象数组

这里只介绍：serialize()

看script：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            //var frm=$("#form1").serializeArray();
            var frm = $("#form1");
            $.ajax({
                url : frm.attr("action"),
                type : frm.attr("method"),
                async : true,
                data : frm.serialize(),
                //var data=$("#form1").serializeArray();

                success : function(data) {
                    alert("ok");
                },
                error : function(data) {
                    alert(data.status);
                }
            });
        });
    });
</script>

form表单：

    <form id="form1"
        action="${pageContext.request.contextPath}/ClassServlet" method="POST">
        <input type="text" name="name" /> <input type="password"
            name="password" /> <input type="button" id="mybutton" value="点我" />
    </form>

注意：
使用：serialize()

这时表单的按钮的type不可以是submit，否则自提交数据，  
也就是自动刷新； 用Ajax的serialize()提交表单，  
如果input的type为submit，提交时就会自动刷新，  
所以，用serialize()提交表单的时候最好把type改为button.

【推荐学习：jQuery视频教程、web前端视频】

以上就是Jquery交互的方式都有哪些的详细内容，更多请关注gxlsystem.com其它相关文章！

电脑软件

今日推荐

优途云视官方版

版本：v2.8.6.0

大小：37.67MB

日期：2025-01-01
快来用车安卓版

版本：v1.8.3

大小：30.67MB

日期：2025-01-01
蜗牛盾完整版

版本：v2.4.7

大小：4.69MB

日期：2025-01-01
飘飘漫画永久免费版

版本：2.40.00

大小：11.54MB

日期：2025-01-01
漫猫猫漫画免费版

版本：2.0

大小：0.55MB

日期：2025-01-01
天天拼图正版

版本：v6.0.3

大小：38.31MB

日期：2025-01-01

Jquery交互的方式都有哪些

jquery ajax前后台交互的6种方式

相关推荐

电脑软件

热门排行

今日推荐

热门手游