在这篇文章中,我们将看到我们如何使用jQuery的阿贾克斯()函数来调用后端函数异步或者换句话说HTTP请求。 AJAX是一组 Web 开发技术,客户端框架和库使用这些技术对服务器进行异步 HTTP 调用。 AJAX的全称是“的同步ĴavaScript和X ML”。
简而言之,您可以使用 Ajax 从后端加载数据,而无需实际重新加载页面。您还可以在后台向服务器发送数据,在页面已经加载时请求数据和接收数据。使用 ajax 可以在应用程序上提供更好的用户体验。
句法:
$.ajax(url);
$.ajax(url,[options]);
下表列出了 ajax 请求常用的选项。
url | A string containing the URL to which the request is sent. |
type | A type of http request e.g. POST, PUT and GET. Default is GET request. |
contentType | A string containing a type of content sent to the server. |
dataType | The type of data that you’re expecting back from the server, JSON, XML, etc. |
success | A callback function to be executed when Ajax request succeeds. |
error | A callback function to be executed when the request fails. |
data | A data to be sent to the server. It can be JSON object, string or array. |
创建一个简单的 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"
}
]
例子:
HTML
Welcome To GFG
Default code has been
loaded into the Editor.
Python
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 recieves.'''
data = request.get_json()
print(data)
return ({"status":200, "data":data})
return render_template("post.html")
if __name__ == '__main__':
app.run(debug=True)
HTML
Welcome To GFG
Default code has been loaded
into the Editor.
输出:
[
{
"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的信息,你可以在这里阅读它的官方文档。
Python
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 recieves.'''
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
Welcome To GFG
Default code has been loaded
into the Editor.
输出:
{
data: {name: "Aman Prakash Jha", occupation: "SDE"},
status:200
}