$.ajax()的初步认识

对于前后端的数据交互,使用ajax是最常见的技术。ajax的核心是在前后端进行通信的时候会返回一个对象XMLHttpRequest,IEl浏览器下是ActiveXObject对象。

ajax的核心参数如下:

type:string(“get”和“post”类型);

async:boolean;(是否异步);

dataType:string;(请求的数据类型)

会有以下几种数据类型:

  •  “xml”(返回的数据类型XML 文档);
  •  “html”(返回的HTML文档);
  •  “script”(返回纯文本的JavaScript代码,默认不自动缓存,需要设置ceche参数);
  •  “json”(返回的json 数据,最常用的一种);
  •  “jsonp”(格式为jsonp的数据);
  •  “text”(纯文本数据)。

data:(发送到服务器端的数据,必须以key/value的形式编写);

url:string(发送请求的地址(服务器端地址),默认是当前页);

success:function(数据返回成功后执行的函数);

error:function(服务器数据返回失败后执行的函数);

timeout:number(请求超时的时间);

dataFilter:function(处理创建的XMLHttpRequest对象);

context:object(指定回调函数内执行的this对象,不声明的话this指向调用本次 AJAX 请求时的对象);

global:boolean(是否触发全局 AJAX 事件。默认值: true);

ifModified:boolean(仅在服务器端数据改变的时候发起请求,默认是false);

jsonp:String(在一个 jsonp 中重写回调函数的字符串);

jsonpCallback:String(在一个jsonp规定函数名称);

password:string(用于响应 HTTP 访问认证请求的密码);

username:string(用于响应 HTTP 访问认证请求的用户名);

xhr:function(用于重写一个XMLHttpRequest对象);

traditional:boolean(传统方式序列化数据);

scriptCharset:string(规定请求的内容编码);

complete:function(请求完成后调用的函数,不管是success还是error);

beforeSend:function(请求之前执行的函数,修改XMLHttpRequest);

cache:boolean(缓存被请求的页面,默认是true);

下面是一个简单的ajax例子:

    //下单查询
    function quaryTask(){
        var taskId=$("#task_number").val();
        var beginTime=$("#beginTime").val();
        var endTime=$("#endTime").val();
        $.ajax({
            type:'post',
            dataType:'json',
            //向服务器请求的url
            url:'',
            async:true,
            //发送到服务器的数据
            data:{
                api:"",//请求的api接口
                usr:"", 
                pwd:"",
                id:taskId,
                beginTime:beginTime,
                endTime:endTime
            },
            //查询成功后返回的回调函数
            success:function(Result){
                if(Result){
                    var result=JSON.parse(Result);
                    if(result.success){
                        var data=result.data
                    }else{
                        mui.alert("数据有误")
                    }
                }else{
                    mui.alert("数据有误")
                }
            }
        });
    };

 

                            

posted @ 2017-05-10 17:01  missmz  阅读(401)  评论(0编辑  收藏  举报