基于ajax的前端与服务器交互

主要讲解jQuery的get()，post，ajax的用法。

一、$.get()

$.get(url, data).done().fail()

1、url，直接传给服务器，服务器然后通过路由来选择处理函数
2、data，映射或者字符串值，将被浏览器以参数的形式（例如：id=2018 &password=admin）自动添加到url中，然后传递给服务器。服务器通过以下代码获得参数的对象。

var URLobj = url.parse(request.url);
var inputData = querystring.parse(URLobj.query);

3.根据服务器返回的状态码自动选择执行done或fail中的回调函数。
状态码为[200,300) || 304时，则执行done，否则执行fail。

二、$.post()

与$.get()相同，如果想用post传递文件而非字符串，那么请使用jQuery.ajax()。

三、$.ajax()

ajax要比get和post更加的灵活，也更加的基础；

var sendData = new FormData();
sendData.append("name", "jack");
sendData.append("name", "tom");
sendData.append("age", "11");
sendData.append("age", "12");
sendData.append("pic", new Image("./1.png"));
sendData.append("pic", new Image("./2.png"));
sendData.append("file", new Image("./1.doc"));
sendData.append("file", new Image("./2.doc"));
$.ajax({
type: "POST",
url: "/upLoadPicture",
data: sendData,
dataType: "json",
processData: false,
// 告诉jQuery不要去处理发送的数据
contentType: false,
// 告诉jQuery不要去设置Content-Type请求头
}).done().fail();

与前两者最大的区别在于，sendData对象更加的复杂，他可以包含字符串和图片文件等等。

服务器通过mulltiparty模块来获取sendData对象，可以了解一下：

//设置图片储存路径，相对于服务器运行文件的路径
var opLoaddata = new mtparty.Form({uploadDir: "./image"});
opLoaddata.parse(request, function(err, fields, fileObj) {
//fields.name是字符串构成的数组[jack, tom]
//fields.age是字符串构成的数组[11, 12]
//fileobj.pic是文件的json对象构成的数组[1.png, 1.png]
//fileobj.file是文件的json对象构成的数组[1.doc, 2.doc]
})

最后

以上就是俏皮仙人掌为你收集整理的基于ajax的前端与服务器交互的全部内容，希望文章能够帮你解决基于ajax的前端与服务器交互所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。