Jquery支持的AJAX

最新推荐文章于 2021-06-20 22:38:00 发布

OceanBase

最新推荐文章于 2021-06-20 22:38:00 发布

阅读量421

点赞数

分类专栏： Ajax 文章标签： Ajax Jquery支持的Ajax

本文链接：https://blog.csdn.net/qq_37923253/article/details/79418013

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、JQuery支持的Ajax功能实现方式：

一共有四种方式来实现JQuery的ajax功能分别为：

$.ajax
$.get
$.post
$.onload

1、$.ajax方式
这个方法是最接近原生Ajax的一个方法：
常用属性有：

type：用于指定类型取值为POST或GET
url:请求资源路径
dataType:异步请求返回类型，取值为：text,json,html,xml
async:是否发送异步请求，取值为：true或false，如果我false将阻塞浏览器线程等待服务器响应信息，但不会刷新页面，默认值为true
data:请求中的参数数据，字符串值，只要符合参数的数据结构即可，例如：name=张三&age=23
success:请求成功后执行的回调方法参数为一个方法引用，通常这里我们设置一个匿名方法，改方法的参数data为Web服务响应的的所有内容
error:请求失败后执行的回调方法参数为一个方法引用，通常这里我们设置一个匿名方法，当异步引擎的状态码不为4 http请求状态码不为200时执行
使用方法：

<script type="text/javascript">
    $(function() {
        $("#xsxx").click(function(){
            $.ajax({
                //type:"post",
                url : "myServlet1.do",
                dataType : "text",
                data : "username=张三&password=123",
                success : function(data) {
        document.getElementById("xs").innerHTML=data;
                },
                error : function() {
                    alert("服务器崩溃了");
                }
            });

        })
    })
</script>
</head>
<body>
<button id="xsxx">显示信息</button>
    <span id="xs"></span>
</body>

2、$.get方式
该方式有效的简化了$.ajax的方式：
参数如下：
参数1 必选参数字符串类型用于指定请求路径
参数2 可选参数 key/value的对象类型用于传递请求参数
参数3 可选参数方法引用类型用于设置毁掉方法通常我们这里这个一个匿名方法,改方法的参数data为Web服务响应的的所有内容
参数4 可选参数字符串类型用于设定请求返回信息类型，取值为text html json script
使用方式：

<script type="text/javascript">
    //文本参数
    $(function() {

        $("#xsxx").click(function(){

            $.get(
                    "myServlet1.do", 
                    {"username":"lisi","password":"234"},
                    //"username=zs&password=123",
                    function(data) {
                        document.getElementById("xs").innerHTML=data;
                    },
                    "text"
            );

        })



    })
</script>
</head>
<body>

<button id="xsxx">显示信息</button>
<span id="xs"></span>
</body>

3、$.post方式
参数1 必选参数字符串类型用于指定请求路径
参数2 可选参数 key/value的对象类型用于传递请求参数
参数3 可选参数方法引用类型用于设置毁掉方法通常我们这里这个一个匿名方法，改方法的参数data为Web服务响应的的所有内容
参数4 可选参数字符串类型用于设定请求返回信息类型，取值为text html json script
使用方法：

<script type="text/javascript">
    //文本参数
    $(function() {

        $("#xsxx").click(function(){

            $.post(
                    "myServlet1.do", 
                    {"username":"李四","password":"234"},
                    //"username=zs&password=123",
                    function(data) {
                        document.getElementById("xs").innerHTML=data;
                    },
                    "text"
            );

        })
    })
</script>
</head>
<body>
    <button id="xsxx">显示信息</button>
    <span id="xs"></span>
</body>

上述3种方式总结：
通常建议使用 $.post方法，这样可以有效的避免请求数据乱码，如果需要为Ajax请求出现错误做出响应需要使用$ .ajax方法
4、Json的表现形式
格式一：{"key1":value1,"key2":value2}
格式二：[o1,o2] **5、Ajax的返回值设置为Json格式** 实例：Ajax代码：注意响应格式变为了json

<script type="text/javascript">
    //文本参数
    $(function() {

        $("#xsxx").click(function(){

            $.post(
                    "myServlet1.do", 
                    {"username":"张三123","password":"333"},
                    //"username=zs&password=123",
                    function(data) {
                             document.getElementById("xs1").innerHTML=data.username;
                                                             document.getElementById("xs2").innerHTML=data.password;

                    },
                    "json"
            );

        })
    })
</script>
</head>
<body>

    <button id="xsxx">显示信息</button><br/>
    显示账号：<span id="xs1"></span><br/>
    显示密码：<span id="xs2"></span><br/>
</body>

服务器端响应关键代码：
这里写图片描述

OceanBase

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery支持的AJAX

1、JQuery支持的Ajax功能实现方式：一共有四种方式来实现JQuery的ajax功能分别为：$.ajax$.get$.post$.onload1、$.ajax方式这个方法是最接近原生Ajax的一个方法：常用属性有：type：用于指定类型取值为POST或GETurl:请求资源路径dataType:异步请求返回类型，取值为：text,json,html,x...
复制链接

扫一扫