如何使用jQuery从AJAX请求中获得服务器响应

在这篇文章中，我们将看到我们如何使用jQuery来获得服务器对AJAX请求的响应。要回答这个问题，我们必须了解jQuery ajax()方法。

jQuery ajax()方法实现了jQuery中的基本Ajax功能。它通过异步的HTTP请求与服务器进行通信。

语法:

$.ajax(url);
$.ajax(url,[options]);

参数:

url。一个URL字符串，你希望向其发送或获取数据。
options:用于配置一个Ajax请求的选项。JSON格式用于指定一个选项参数。这是一个可选的参数。

下表列出了Ajax请求的所有配置选项。

选项	说明
url	发送请求的URL是一个字符串。
data	数据将被传送到服务器。它可以是一个JSON对象，一个字符串，或一个数组。
type	一种HTTP请求，如POST、PUT或GET。默认是GET。
success	当一个Ajax请求成功时，会调用一个回调函数。
timeout	请求的超时值，单位为毫秒。
username	在响应HTTP访问认证请求时，使用XMLHttpRequest利用这个用户名。
xhr	当XMLHttpRequest对象被创建时，会调用一个函数。
xhrFields	在本地XMLHttpRequest对象上设置一个field_name-field_Value对的对象。
statusCode	一个JSON对象，包含HTTP数字代码和响应中出现匹配代码时要调用的方法。
accepts	在请求头中指定的内容类型，它通知服务器它将接受哪种答案作为回报。
async	默认情况下，所有查询都是异步发送。要使其同步，请将其设置为 “false”。
beforeSend	在发出Ajax请求之前，将调用一个回调函数。
cache	一个布尔值，表示存在浏览器的缓存。默认值为 “true”。
complete	当请求完成后，一个回调函数被调用。
contentType	当向服务器传输MIME材料时，这个字符串包含内容的种类。默认是 “application/x-www-form-urlencoded; charset=UTF-8″。
crossDomain	一个布尔值，表示一个请求是否是跨域的。
dataType	你预期从服务器收到的数据类型。
error	当请求失败时，会执行一个回调函数。
global	一个布尔值，表示是否调用一个全局的Ajax请求处理程序。默认为 “true”。
headers	一个包含额外的头密钥/值对的对象，与请求一起交付。
ifModified	只有当响应自上次请求后发生变化时，才允许请求成功。Last-Modified头被用来做到这一点。默认设置为 “false”。
isLocal	允许将当前环境确认为本地。
jsonp	在JSONP请求中，你可以改变回调函数的名称。这个值将被用来代替URL中查询字符串’callback=?’部分的’回调’。
jsonpCallback	一个字符串，代表JSONP请求的回调函数的名称。
mimeType	用一个包含mime类型的字符串来覆盖XMLHttpRequest的mime类型。
password	在响应HTTP访问认证请求时，使用XMLHttpRequest利用这个密码。
processData	一个布尔值，表示提供给数据选项的数据是否会被转换为查询字符串。默认值为 “true”。

例子1：本实例使用ajax()方法从外部文件demo.txt中获取文本内容。在下面的例子中，ajax()函数的第一个参数是一个url，我们希望从中获取数据。第二个参数是选项参数，它包含了成功和错误的回调函数。

demo.txt:

Welcome To GFG

HTML code:

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
  
    <h2>Click on the button to send ajax request</h2>
    <button>Send</button>
  
    <h2 id="p1"></h2>
  
    <script>
         $(document).ready(function () {$ ("button").click(function () {
                 $.ajax("demo.txt", { success: function (data) { // Success callback function$ ("#p1").append(data);
                    },
                    error: function (errorMessage) {
                      // Error callback
                      $("#p1").append("Error: " + errorMessage);
                    },
                });
            });
        });
    </script>
</body>
</html>

输出:

如何使用jQuery从AJAX请求中获得服务器响应？

例子2：下面的例子演示了如何使用ajax()函数获得JSON数据。下面的例子中的第一个参数是一个请求url，它将返回JSON数据。我们在选项参数中提到了dataType选项。dataType选项定义了响应数据的种类，本例中是JSON。我们还定义了错误和成功的回调函数。

demo.json:

{
  "name": "Vishal Kumar", 
  "age" : "22", 
  "gender": "Male" 
}

HTML code:

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
  
    <style>
        #output {
            background-color: rgb(205, 228, 30);
            width: fit-content;
        }
    </style>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
  
    <h2>Click on the button to send ajax request</h2>
  
    <button>Send</button>
  
    <div id="output"></div>
  
    <script>
         $(document).ready(function () {$ ("button").click(function () {
                 $.ajax("demo.json", { success: function (data) { // success callback function$ ("#output").append("<p> Name: " + data.name + "</p>");
                       $("#output").append("<p>Age : " + data.age + "</p>");$ ("#output").append("<p>Gender: " + data.gender + "</p>");
                    },
                    error: function (errorMessage) {
                      // error callback
                      $("#output").append("Error: " + errorMessage);
                    },
                });
            });
        });
    </script>
</body>
</html>

输出:

如何使用jQuery从AJAX请求中获得服务器响应？