【快播报】Jquery交互的方式都有哪些

时间:2023-01-03 19:02:26       来源:PHP中文网

本教程操作环境: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" 的元素的内容,  加载到指定的 
元素中:实例:$("#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表单:

登录后复制

注意:使用:serialize()

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

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

以上就是Jquery交互的方式都有哪些的详细内容,更多请关注php中文网其它相关文章!

关键词: 自动刷新 相关文章 两种方式