前端
一点也不简单

jquery的ajax用法

jquery:写得少做得多。

jquery中对ajax也进行了封装。简单易用,其使用过程中基本上都是照葫芦画瓢,我们来看下葫芦:

$.ajax({
            type: "method"
            async:boolean,
            url: "url",
            data: "data",
            cache:boolean,
            dataType: "dataType",
            success: function(response) {

            }
        });

我们来对这个葫芦详细的解释一下:

type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。

            如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:”bar1″,foo2:”bar2″}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1″,”bar2”]}转换为&foo=bar1&foo=bar2。

cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。

dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。

可用的类型如下:

  • xml:返回XML文档,可用JQuery处理。
  • html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
  • script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
  • json:返回JSON数据。(常用)
  • jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。(常用)
  • text:返回纯文本字符串。

jsonpCallback:该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分。

success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。

  1. 由服务器返回,并根据dataType参数进行处理后的数据。
  2. 描述状态的字符串。

jquery的ajax用法案例(画瓢):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('#search').on('keyup', function() {
                var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=";
                $.ajax({
                    type: "get",
                    //async:true,//可选
                    url: url + $(this).val() + "&cb=callback",
                    // data: "data",//可选
                    dataType: "jsonp",
                    cache: true, //可选
                    jsonpCallback: "callback", //代替请求地址中的callback参数
                    success: function(response) {
                        console.log(response); //打印出返回的数据
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="search">
</body>
</html>

这里实现的是input输入框按键弹起,就打印百度搜索框里的搜索相关数据,例如我输入12306

ajax输入12306数据结果
打印结果

数据获取到了,就可以进行你的其他操作了,直观的看出反回了一个jsonp格式的数据,好了以上就是本次的瓢。

赞(0) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » jquery的ajax用法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏