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

最新推荐文章于 2023-12-12 20:32:43 发布

Melony_Xin

最新推荐文章于 2023-12-12 20:32:43 发布

阅读量216

点赞数 1

分类专栏： javasript 文章标签： ajax javasript

本文链接：https://blog.csdn.net/qq_31555445/article/details/84143919

版权

javasript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基本知识

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：传入的数据。