在Jquery中,哪些交互性类型

发布时间：2023-07-06 11:30:16 所属栏目：教程来源：互联网

导读： 　　给大家分享一下Jquery的交互方式有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，

　　给大家分享一下Jquery的交互方式有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

　　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() 方法。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!