极客教程如何使用jQuery的ajax()函数进行异步的HTTP请求
在这篇文章中，我们将看到如何使用jQuery的ajax()函数来异步调用后端功能，或者换句话说是HTTP请求。AJAX是一套由客户端框架和库使用的网络开发技术，用于向服务器进行异步的HTTP调用。AJAX是 “A synchronous J avaScript and X ML “的缩写。
更简单地说，你可以使用Ajax从后台加载数据，而实际上不需要重新加载页面。你也可以在后台向服务器发送数据，在页面已经加载时请求数据和接收数据。使用Ajax可以在应用程序上提供更好的用户体验。
语法:
$.ajax(url);
$.ajax(url,[options]);
下表列出了ajax请求中常用的下级选项。
| url | 一个字符串，包含请求所要发送的URL。 |
|---|---|
| type | 一个http请求的类型，例如POST、PUT和GET。默认为GET请求。 |
| contentType | 一个包含发送到服务器的内容类型的字符串。 |
| dataType | 你期望从服务器返回的数据类型，JSON、XML等。 |
| success | 一个回调函数，在Ajax请求成功时执行。 |
| error | 一个回调函数，在请求失败时执行。 |
| data | 一个要发送至服务器的数据。它可以是JSON对象、字符串或数组。 |
创建一个简单的AJAX GET请求
在我们使用Ajax之前，我们需要在你的应用程序中获得jQuery。在这篇文章中，我们将使用网上提供的Ajax jQuery脚本，如下面的代码。为了这篇文章的目的，我们将考虑一个JSON文件，我们将发送一个ajax()请求并从文件中获取数据。
让我们考虑一下，名为 “data.json “的JSON文件在一个名为data的文件夹内，该文件夹位于根目录下，换句话说，就是我们的html文件当前所在的文件夹，其数据如下图所示。
注意：请记住，你需要在localhost或一些部署好的路径上进行ajax请求工作，否则会给你一个CORS（跨源资源共享）错误。
** data.json文件：**
[
{
"Name":"Aman Prakash Jha",
"Occupation": "Student"
},
{
"Name":"Sharan Swaroop",
"Occupation":"SDE-1"
},
{
"Name":"Chiraag Kakar",
"Occupation":"Sr. Software Engineer"
}
]
示例:
<!DOCTYPE html>
<html>
<head>
<!--Loading the script so that we can use Ajax-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
Default code has been
loaded into the Editor.
</p>
<button id="getData">GET</button>
<script>
("#getData").click(function (event) {
event.preventDefault();
.ajax({
url: "data/data.json",
type: "GET",
dataType: "json",
success: function (data) {
// This here will print the
// retrieved json on the console.
console.log(data);
},
error: function () {
console.log("Something went wrong");
},
});
});
</script>
</body>
</html>
输出:
[
{
"Name":"Aman Prakash Jha",
"Occupation": "Student"
},
{
"Name":"Sharan Swaroop",
"Occupation":"SDE-1"
},
{
"Name":"Chiraag Kakar",
"Occupation":"Sr. Software Engineer"
}
]
发送一个简单的AJAX POST请求。
现在让我们继续前进，尝试使用ajax()方法发送一个 “POST “请求。
在这个例子中，我们将使用一个用flask-microframework编写的简单的python函数，它将接收来自ajax()的POST请求并简单地返回数据。如果你想了解更多关于flask的信息，你可以在这里阅读其官方文档。
from flask import Flask, redirect, render_template, request
app = Flask(__name__)
@app.route('/data/post_data/', methods = ["GET","POST"])
def post_data():
'''Function which is supposed to process the
POST request received from ajax'''
data = None
if request.method == "POST":
'''Stores the Json file that is posted by ajax.
This function simply returns the Json file
it receives.'''
data = request.get_json()
print(data)
return ({"status":200, "data":data})
return render_template("post.html")
if __name__ == '__main__':
app.run(debug=True)
例子：这是你如何用ajax()为 “POST “请求设置HTML。
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>Default code has been loaded
into the Editor.</p>
<form method="POST">
<input type="text"
placeholder="Name" id="name">
<button id="btn">POST</button>
</form>
<script>
("#btn").click(function(event){
event.preventDefault();
var name =("#name").val();
$.ajax({
url:"/data/post_data/",
type:"POST",
contentType:"application/json",
dataType:"json",
data: JSON.stringify({
name: name,
occupation: "SDE"
}),
success: function(data) {
console.log(data)
},
error: function(data ){
console.log("Something went wrong");
}
});
});
</script>
</body>
</html>
输出:
{
data: {name: "Aman Prakash Jha", occupation: "SDE"},
status:200
}