在折腾前端的时候，有时候要跟后端交互，需要调用Ajax, 原始的Ajax不那么好用，可以用jquery里面的。或者用插件axios。
jQuery对Ajax的操作进行了封装。jQuery中.ajax()属于最底层的方法。 先来看一个简单的例子：
代码语言：javascript复制$.ajax({
url:"http://www.microsoft.com", //请求的url地址
dataType:"json", //返回格式为json
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
data:{"id":"value"}, //参数值
type:"GET", //请求方式 get 或者post
beforeSend:function(){
//请求前的处理
},
success:function(req){
//请求成功时处理
},
complete:function(){
//请求完成的处理
},
error:function(){
//请求出错处理
}
});url 必需。规定把请求发送到哪个 URL。 data 可选。映射或字符串值。规定连同请求发送到服务器的数据。 type: post or get, 请求方式 dataType 可选。规定预期的服务器响应的数据类型。 success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
$.ajax()参数说明：
代码语言：javascript复制url(String):发送请求地址。
type(String):请求方式(POST或GET)，默认为GET。其他HTTP请求方法如PUT、DELETE，仅部分浏览器支持。
data(Object或String):发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。GET请求中将附加在url后。对象必须是key/value格式，例如{id:"xxyh", password:"123456"}转换为&id=xxyh&password=123456。如果是数组，将自动为不同值对应同一个名称。例如{name:["xxyh","dudu"]}转换为&name=xxyh&name=dudu。
dataType(String):预期服务器返回的数据类型。如果不指定，jquery将根据HTTP包MINE信息返回responseXML或responseText,并作为回调函数参数传递。可用类型：
xml:返回XML文档，可用jquery处理
html:返回纯文本HTML信息，包含的script标签会插入DOM时执行。
script:返回纯文本JavaScript代码。如果没有设置cache参数，不会自动缓存结果。在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。
json:返回JSON数据。
jsonp:JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?,jquery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text:返回纯文本字符串。
complete(Function):请求完成后回调函数(请求成功或失败后均调用)。
参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest,textStatus){
this; // 调用本次Ajax请求时传递的options参数
}
success(Function):请求成功回调函数。有2个参数：
参数：由服务器返回，并根据dataType参数进行处理后的数据和描述状态的字符串。
function(data, textStatus) {
// data 可能是xmlDoc,jsonObj,html,text等
this; // 调用本次Ajax请求时传递的options参数
}
error(Function):请求失败时被调用的函数。这个函数有3个参数，即XMLHttpRequest对象、错误信息和捕获的错误对象
function(XMLHttpRequest, textStatus, errorThrown){
// 通常情况下textStatus和errorThrown只有一个包含信息
this; // 调用本次Ajax请求时传递的options参数
}
contentType(String):当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。
jsonp(String):在一个jsonp请求中重写回调函数的名字。用来替代在“callback=?”这种GET或POST请求中URL参数里的“callback”部分，例如{jsonp:'onJsonPLoad'}会导致将“onJsonPLoad=?”传给服务器。
cache
要求为Boolean类型的参数，默认为true（当dataType为Script时，默认为false），设置false将不会从浏览器缓存中加载请求信息。获取JSON数据 接下来通过$.ajax()获取json数据。jquery代码：
代码语言：javascript复制$(function () {
$("#send").click(function () {
$.ajax({
type:"GET",
url:"demo.json",
dataType:"json",
success: function (data) {
$("#resText").empty();
var html = "";
$.each(data, function (commentIndex, comment) {
html = "<div class='comment'><a href='#' class='username'>" comment['username']
"</a><span class='location'>" comment['location']
"</span></p><p class='contentTxt'>" comment['contentTxt'] "</p></div>";
});
$("#resText").html(html);
}
})
});
})如果我们用flask来写个例子，当然前端数据可以获取，那么前端大约是这样的：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.css" rel="stylesheet">
</head>
<body>
<div id="example-5">
<div class="four wide field">
<div id="blurb-test-submit" class="ui primary submit button">Submit</div>
</div>
</div>
<script>
let submit = $('#blurb-test-submit');
submit.click(function () {
submit.addClass('loading disabled');
$.ajax({
type: 'GET',
url: '/progress',
data: {"memberid":"1","env":"qa"},
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
if (data.error) {
console.log(data);
} else {
console.log(data.password);
}
},
complete: function () {
submit.removeClass('disabled loading');
}
});
});
</script>
</body>
</html>后端可以用flask来搭，代码大约是这样的：
代码语言：javascript复制from flask import Flask, request, redirect, url_for, render_template, Response, jsonify, make_response
app = Flask(__name__)
@app.route('/test7')
def test7():
return render_template("test7.html")
@app.route('/progress', methods=['GET'])
def get_progress():
if request.method == "GET":
memberid = request.args.get("memberid")
env = request.args.get("env")
if memberid == "":
password = "Error! Please input memberid"
else:
password = env
return jsonify({"password": password})
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)运行起来，可以看到，通过ajax, 将前端的值传给了后端处理，并得到了一个返回：
这是一个非常简单的例子，为了就是更好的理解jquery中的ajax的用法。掌握了这些基本用法，就可以愉快的搭建工具来提高生产效率了。
