📜  如何使用 jQuery 的 ajax()函数处理异步 HTTP 请求?

📅  最后修改于: 2021-11-10 04:04:39             🧑  作者: Mango

在这篇文章中,我们将看到我们如何使用jQuery的阿贾克斯()函数来调用后端函数异步或者换句话说HTTP请求。 AJAX是一组 Web 开发技术,客户端框架和库使用这些技术对服务器进行异步 HTTP 调用。 AJAX的全称是“同步ĴavaScriptX 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
}