基于JQuery的ajax前后端数据交互

打开页面即发送请求

$(document).ready(function(){  //打开页面执行
    $.post("",{},function(data){ //发送请求，data 为接收的数据
        //方式1
        var content='content='+data;
        eval(content); //把数据进行转换，用content.调用，eval 是魔鬼！！！
        //方式2 （推荐）
        var content = JSON.parse(data);
    })
});

像后台发送内容（不包含文件）

$.ajax({
    url:"",  //发送文件文件地址
    type:"post",   //发送方式post/get ……，也可以用method指定请求方式
    headers: { 'Accept':' */*' },  //按需求填，一般不用写
    async:false,  //同步
    contentType: 'application/json',  // 发送json 时添加，否则发送的是formdata
    dataType:'json',  // 发送json 时添加，否则发送的是formdata
    data:{  //发送的数据，如果发json -> data:JSON.stringify(json)；
        "name":key,//name自己定，key事先获取
    },   
    success:function(data){ //成功执行方法
        if(data==0){
            window.location.href='/';//页面重定向
        }
    }
})

PS：上边两种ajax写法作用相同，第一种是简写

向后台发送文件+数据

var formdata=new FormData(); // 发文件一定要有这句话
// 获取到文件
var oFiles = document.querySelector("input#Idfile2");    
//将文件添加到发送的结果里，oFiles 要一样
formdate.append(oFiles.name, oFiles.files[0]);
//上传文件写在前边
//input 输入内容 val()
var text = $("input[type='text']").eq(i).val(); 
//把内容添加到传送结果里
formdata.append(text.attr("name"),text); 
//有文件传输时要这样写
$.ajax({
    url:"",//请求地址（后端接口）
    type:"post",//请求方式
    async:false,
    data:formdata,
    cache: false,  
    contentType: false,
    processData: false, 
    //data 是后台返回来的值，可自己取名 
    success:function(data){   
        if(data==0){
            //打开一个新的页面
            window.location.href='/'; 
        }
    }
})

json发送（简写）

$("").click(function(){ //点击执行函数
    //先创建一个对象
    var obj = {}; 
    //  xxx 为自定义
    obj.xxx = $("input[name$='name']").val(); 
    //（必须要写),把对象变成json   
    var abc = JSON.stringify(obj);
    $.post("", {"data": abc}, function (ct) {   
        //省略
    })
});

最后再来粗略的说一下ajax中的一些参数，

async

async: true，默认为true,即异步方式，ajax 执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。
async:false，同步请求，在没有得到后端返回值之前，不继续向下执行。

cache

cache只在type:get下有效。
cache: false,在url后面加一个时间缀，不缓存，从服务器上重新获取数据。
cache: true,读取缓存，如果数据已经请求过，则不再请求服务器。

contentType

表示发送信息至服务器时内容编码类型,通俗点说就是告诉服务器从浏览器提交过来的数据格式。默认值为：contentType ： "application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。但是当使用formData传输文件时，http协议中并不支持文件传输，所以 contentType: false，则避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。

processData

要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类 型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。