jQuery中的ajax

一，第一个简单的实列

1，（发送请求【没有数据】获取数据）
index.hmtl文件

   <body>
         <p>把内容添加到这里</p>
         <button>点我</button>
         <script type="text/javascript" src="jquery-3.2.0.min.js">    </script>
         <script type="text/javascript" src="router.js"></script>
        <script>
            $("document").ready(function(){
                $("button").on("click",function(){
                    $.ajax({
                        url:"/first",
                        type:"get",
                        success:function(ret){
                            console.log(ret);
                        },
                        error:function(){
                            console.log("err。。。")
                        }
                    })
                })
            })
        
        </script>
    </body>

router.js文件

    app.get("/first",function(req,res){
        res.send("哈哈，成功，第一个jquery-ajax请求耶！！")
    })

图片.png

2，发送数据，获取数据
index.html

         <body>
             <button>点我</button>
             <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
             <script type="text/javascript" src="router.js"></script>
            <script>
                $("document").ready(function(){
                    $("button").on("click",function(){
                        $.ajax({
                            url:"/first",
                            type:"get",
                            data:{username:"yangliu"},
                            dataType:"json",
                            success:function(ret){
                                console.log(ret);
                            },
                            error:function(){
                                console.log("err。。。")
                            }
                        })
                    })
                })

            </script>
        </body>

router.js

        app.get("/first",function(req,res){
            //console.log(req)
            var username=req.query.username
            console.log(username)
            if(username==="yangliu"){
                var result={
                    username:"frank",
                    age:18
                }
            }
           res.send(result)

图片.png

图片.png

二，注意事项：

1，cache

默认值是true,意思是缓存，比如，获取杭州的天气，这次获取到了，缓存到浏览器
下次再发送杭州，获取杭州的天气，那么，这次得到杭州天气的数据是浏览器缓存的数据，不是正真现在杭州的天气
false浏览器将不缓存数据

2，async

传输的方式，异步同步，默认异步 ture,如果设置为false表示同步

3，dataType

和服务器约定响应回来的数据格式，如果是json数据类型，注明dateType:"json。当我们使用响应json数据的时候，不用把它转换成对象，因为jQuery内部自动帮我们把字符串的json转换成了对象

4,complete

后面跟一个函数，不管ajax执行成功或失败，都会执行这个函数，只要ajax执行完毕

5，data

向服务器发送的数据

6，error

发生错误:超时，服务器发生错误，和约定的响应数据格式不同，未知的错误
执行error的函数

7，type

发送的方式：get，post

8，url

url地址，接口

图片.png

上图里面的dateType书写错误，修改成dataType

三，jquery的ajax的书写方式3种：

$.ajax(对象)

方法一：

$.ajax({
url:"/xx",
type:"get",
data:{username:"yangliu"},
dataType:"json",
success:fn1(ret){。。。},
error：fn2(){。。。},
complete:fn3(){。。。}
})

方法二：

$.ajax({
url:"/xx",
type:"get",
data:{username:"yangliu"},
dataType:"json"
}).done(function(ret){ret是响应数据。。。}).fail(function(){。。。}).always(function(){。。。})

方法三：
在知道是哪种请求方式的时候，如get或post
可以直接使用$.get()或$.post()这样的函数执行ajax请求

$.get("/xx", { name: "John", time: "2pm" }).done(function(ret){。。。}).fail(function(){。。。})

注意：
网速慢 延迟时间后提示

图片.png