• 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)
                }
    
            })
        })
  • 相关阅读:
    入浅出MySQL 8.0 lock_sys锁相关优化 原创 腾讯数据库技术 腾讯数据库技术 2021-03-08
    以模型为中心,携程契约系统的演进
    bs
    外观模式
    设计接口时严格区分map、list,方便前端使用。
    t
    The HyperText Transfer Protocol (HTTP) 504
    入理解 epoll 原创 冯志明 Qunar技术沙龙 2021-03-10
    一次XSS和CSRF的组合拳进攻 (CSRF+JSON)
    当程序员具备了抽象思维 从码农到工匠 阿里巴巴中间件 2021-03-09
  • 原文地址:https://www.cnblogs.com/duGD/p/11180901.html
Copyright © 2020-2023  润新知