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) } }) })