Ajax运用的归纳整理

文章目录

1. 1. POST请求语法格式
2. 2. AJAX请求
3. 3. GET请求

Ajax请求包括常见三种 本人日常使用是完整版,但是最近发现ajax中发post请求也是很快的而且很方便,将多种方法都试一遍线顺便整理一下

1. | GET请求 | $.get(url,[data],[callback],[type]) |
2. | POST请求 | $.post(url,[data],[callback],[type]) |
3. | AJAX请求 | `$.ajax([settings])

POST请求语法格式

$.post(url, [data], [callback], [type])
其中，参数说明如下：
| 参数| 说明 |
| url| 请求的服务器端url地址 |
|data|发送给服务器端的请求参数，格式可以是key=value也可以是js对象|
|callback| 当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码|
|type| 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

"user/login",//请求地址
   $("#loginForm").serialize(),//表单所有数据
   function (resultInfo) {
      if(resultInfo.flag){
          //登录成功，跳转到首页
         location.href="index.html";
      }else{
          //失败，显示消息
                           $("#errorMsg").text(resultInfo.errorMsg);
      } },
   "json"
);$("#errorMsg").text("请输入用户名或密码");

现在感觉发post请求,同这个会更简单且更加清晰,只需要url,[data],[callback],[type]),清晰明了,各个部分以’,’分开,

AJAX请求

我之前是完全的ajax请求格式太多但是功能也更加全面

引用自w3school jQuery ajax

 类型：Object

    可选。AJAX 请求设置。所有选项都是可选的。
async

    类型：Boolean

    默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

    注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)

    类型：Function

    发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。

    XMLHttpRequest 对象是唯一的参数。

    这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache

    类型：Boolean

    默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

    jQuery 1.2 新功能。
complete(XHR, TS)

    类型：Function

    请求完成后回调函数 (请求成功或失败之后均调用)。

    参数： XMLHttpRequest 对象和一个描述请求类型的字符串。

    这是一个 Ajax 事件。
contentType

    类型：String

    默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

    默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context

    类型：Object

    这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

route

  var cid=getParameter("cid")
    $.ajax({
        url:"/route/showPage",//请求路径
        data:{"currentPage":currentPage,
              "cid":cid},//发送参数
        dataType:"json", //接收类型确认
        success:function (res) {
            toShowRouteDetail(res)
        }
    })
}
ShowRoute(1)


//显示旅游线路
function toShowRouteDetail(res)  {
    $("#show2Route").empty()
    for(var i=0;i<res.listRoute.length;i++){
        var temp=$("<li>\n" +
            "                            <div class=\"img\"><img width='290px' src=\""+res.listRoute[i].rimage+"\" alt=\"\"></div>\n" +
            "                            <div class=\"text1\">\n" +
            "                                <p>"+res.listRoute[i].rname+"</p>\n" +
            "                                <br/>\n" +
            "                                <p>"+res.listRoute[i].routeIntroduce+"</p>\n" +
            "                            </div>\n" +
            "                            <div class=\"price\">\n" +
            "                                <p class=\"price_num\">\n" +
            "                                    <span>&yen;</span>\n" +
            "                                    <span>"+res.listRoute[i].price+"</span>\n" +
            "                                    <span>起</span>\n" +
            "                                </p>\n" +
            "                                <p><a href=\"/route_detail.html?rid="+res.listRoute[i].rid+"\">查看详情</a></p>\n" +
            "                            </div>\n" +
            "                        </li>");
        $("#show2Route").append(temp)
    }

GET请求

$.get(url,[data],[callback],[type data
方式一：key=value&key=value
方式二：{key:value,key:value…}
| callback | 回调函数：当请求成功后触发的函数 |
|type|返回参数类型：取值可以是xml,html,script, json,text,_defaul等 |

ajaxGetFn() {//Ajax的GET请求：
    //方式一：key=value&key=value形式传值
    // $.get("/getDemo","name='张三'&age=18",function (res) {
    //     //处理响应数据,并在浏览器上显示
    //     alert(res);
    // },"text");

    //方式二：{key:value,key:value}形式传值
    $.get("/getDemo",{"name":"张三","age":18},function   (res) {
        //处理响应数据
        alert(res);
    },"text");

}