JQuery的Ajax

首先说一下Ajax的运行原理:

    页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面的功能。

Ajax的内容:

$(‘#i1‘).click(function(){      // 绑定一个事件
    $.ajax({                    // $.ajax(里面是一个字典)
        async:true,            // 是否异步,默认为true
        url: ‘/ajax_edit‘,      // 要发送到的url
        type: "POST",           // 以post的方式发送
        data: $(‘#add_form‘).serialize(),   // 打包form里所有的东西 发送,但要在提交的form表单上写id、class内写东西来绑定
        // data: {‘user‘: 123,‘host_list‘: [1,2,3,4]},
        dataType: ‘JSON‘,       // 每次后端发送的都是字典转成的字符串,每次都要转码太麻烦,所以写上这个ajax内部就帮我们转码
        traditional: true,      // 传输列表[1,2,3,4]时要写上
        success: function(obj){ // 回调函数,执行成功后自动触发这个函数
            location.reload();  // jQuery下的 刷新页面   
        },
        error: function () {    // 发送请求,如果后台没抓到时执行

        }

    })
});

ps:Ajax如果传输的是字典或列表的话直接用get取值是取不完整的:

request.POST.getlist(**)取到列表

 

 

Ajax发送文件

$('#d1').click(function () {
        // 如果用ajax发送文件 需要使用内置对象FormData
        var formData = new FormData();  // 生成一个内置对象
        // 内置对象formdata既可以传普通的键值对,也可以传文件
        formData.append('name','jason');  // 普通键值对
        formData.append('password','123');
        // 传文件
        var fileObj = $('#d2')[0].files[0];  // 先获取标签对象 转成原生js对象 通过内置的files方法拿到列表 然后去索引0拿到文件对象
        formData.append('myfile',fileObj);
        $.ajax({
            url:'',  // 不写默认朝当前页面所在的url地址提交
            type:'post',
            // 注意ajax在发送文件的时候 需要你手动指定两个特殊的参数
            
            
            contentType:false,  // 不要用任何编码 使用我formdata自带的编码即可
            processData:false,  // 浏览器不要处理我的数据 是什么就什么
            

            data:formData,
            success:function (data) {
                alert(data)
            }

        })
    })

 

posted @ 2019-07-13 15:49  adiugy  阅读(166)  评论(0编辑  收藏  举报