关于使用ajax()的一些小总结

基本知识

ajax() 通过HTTP请求加载远程数据。

笔者近期是用于网页通过访问API与后台数据库进行数据交流。在对最近用到的做一点小总结,不过冰山一角而已。

语法:$.ajax([settings])  [settings] 配置Ajax请求的键值对集合。

例:

$.ajax({
                type:'POST',         //以post方法访问
                url:'http:\\yoururl',   //API地址
                data: data             //上传的数据
}

关于[settings]中的参数详细请见ajax()方法

以form-data形式上传数据

function upload(one,two){
    var data = new FormData();    // 创建一个form-data对象
    data.append('one', one);      //添加要上传的数据
    data.append('two', two);
    $.ajax({
        type:'POST',
        url:'http:\\yoururl',
        data: data
});

}

值得注意的是:用append()进行添加数据

                         第一个参数,引号内容应该是对应访问API的参数名。

                         第二个参数是要上传的数据

上传文件(图片及其它文件)

function upload(file){
    var data = new FormData();    // 创建一个form-data对象
    data.append('file', file);      //添加要上传的文件
    $.ajax({
        type:'POST',
        url:'http:\\yoururl',
        data: data,
        processData: false,         //设置对上传的文件不进行字符串序列化
        async: false,               //设置同步方式访问
        contentType: false,         //防止JQ对上传的文件操作
});

}

上传文件与上传普通的数据差不多,大都可以用form-data的形式上传,只不过传入的数据要求是 flie类型或者blob类型

同时还有一些必要的参数async设置为同步                                                                                                                                                        async 设置为同步方式,一般上传文件时为了防止出错会让网页等待上传完成,或者还有一种情况就是,上传图片然后再显示出来,这也             需要设置为同步方式上传。
processData 设置对上传的文件不进行字符串序列化,默认会将data上传的数据处理转化为一个查询字符串。
contentType 防止jQuery对数据有所修改。

以x-www-form-urlencoded形式上传数据

function upload(one,two){
    var data = {
                'one':one,
                'two':two,
                };    // 以json形式传递参数

    $.ajax({
        type:'POST',
        url:'http:\\yoururl',
        data: data
});

}

这应该是最常见的 POST 提交数据的方式了,浏览器的原生 form 表单。
默认情况下,都是以这种方式传递数据,但是不能传递文件。

接收返回值

function upload(one,two){
    $.ajax({
        type:'POST',
        url:'http:\\yoururl',
        success:function(data){
            var filedata = eval("(" + data + ")");
            //用json对象来接收返回值然后运用。
        },
        error: function () {
                   
        }
});

}

一般返回值是一个json,但没办法直接用,可以通过eval()转化为一个json对象,然后就可以调用其数据。当然也有其它很多方式。

在请求的Header里面传递参数

function upload(one,two){
    $.ajax({
        type:'POST',
        url:'http:\\yoururl',
        beforeSend: function (request) {
            request.setRequestHeader('name',value);
        },
        success:function(){
            
        },
        error: function () {
                   
        }
});

}

在应用中,可能会需要在Header里面传入参数的情况,例如Ba认证等等。
则在beforeSend里面调用setReuqestHeader()函数传入参数。
name:参数名;value:传入的数据。

总结

这是就是笔者刚开始学习做网页,如何与后台数据进行连接的一些方法。大体上,与API对接最基础的都能够实现。Ajax还有更深的东西,这不过是最基础的东西,笔者仅以记录自己一步一步学习的过程。努力!

发布了4 篇原创文章 · 获赞 4 · 访问量 248

猜你喜欢

转载自blog.csdn.net/qq_31555445/article/details/84143919