我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

Jquery的交互方式有哪些

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

创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的集贤网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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

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

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


$(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);
            }
        });
    });
})
下面的例子把 "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方式:


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

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方式:


    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.getJSON("JsonServlet", {
                name:"我是谁",
                age:12
            }, function(json) {
                alert(json.name);
                $("#mydiv").html(json.name);
            });
        });
    });

返回的就直接是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() 方法。

以上就是“Jquery的交互方式有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


分享文章:Jquery的交互方式有哪些
本文来源:http://mswzjz.cn/article/jhcihp.html

其他资讯