• 技术文章 >web前端 >前端问答

    Jquery交互的方式都有哪些

    青灯夜游青灯夜游2023-01-04 09:15:45原创125

    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

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery javascript
    上一篇:jquery可以为按钮绑定点击事件吗 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • jQuery插件分享:Turn.js实现一个移动端电子书翻页效果• 【整理总结】优化jQuery性能的多种方法• jquery中有焦点事件吗• jquery怎么检测元素是否隐藏• jquery ready事件的四种方法是什么
    1/1

    PHP中文网