当前位置：极客教程 > jQuery > jQuery 方法 > jQuery Ajax方法使用的是哪些参数

jQuery Ajax方法使用的是哪些参数

jQuery Ajax方法使用的是哪些参数

在这篇文章中，我们将看到jQuery Ajax方法中使用的参数，同时通过插图了解它们的实现。

jQuery中的ajax()方法是用来执行AJAX请求或异步HTTP请求。一般来说，ajax()方法用于所有需要的jQuery AJAX方法，这些方法主要用于请求和其他方法没有被使用。

语法:

$.ajax({name:value, name:value, ... })
JavaScript

参数值：可能的值列表如下。

  • type。它用于指定请求的类型。
  • url。它用于指定发送请求的URL。
  • username: 它用于指定在HTTP访问认证请求中使用的一个用户名。
  • xhr：它用于创建XMLHttpRequest对象。
  • async。它的默认值是true。它表示该请求是否应该被异步处理。
  • beforeSend(xhr)。这是一个在发送请求前要运行的函数。
  • dataType。服务器响应的预期数据类型。
  • error(xhr, status, error)。它用于在请求失败时运行。
  • global: 其默认值为true。它用于指定是否为该请求触发全局AJAX事件处理。
  • ifModified。它的默认值是false。它用于指定是否只有在响应自上次请求后发生变化时，请求才会成功。
  • jsonp。一个在jsonp请求中覆盖回调函数的字符串。
  • jsonpCallback。它用于为jsonp请求中的回调函数指定一个名称。
  • cache。其默认值为true。它表示浏览器是否应该缓存所请求的页面。
  • complete(xhr, status)。这是一个函数，当请求被完成时，它将被运行。
  • contentType。它的默认值是。”application/x-www-form-urlencoded”，当数据发送至服务器时使用。
  • context。它用于为所有AJAX相关的回调函数指定 “this “值。
  • data。它用于指定要发送至服务器的数据。
  • dataFilter(data, type)。它用于处理XMLHttpRequest的原始响应数据。
  • password: 它被用来指定在HTTP访问认证请求中使用的一个密码。
  • processData。它的默认值是true。它用于指定是否应将与请求一起发送的数据转换为查询字符串。
  • scriptCharset。它用于指定请求的字符集。
  • success(result, status, xhr)。当请求成功时，它将被运行。
  • timeout。它是请求的本地超时。它是以毫秒为单位衡量的。
  • traditional：用于指定是否使用参数序列化的传统风格。

各种参数可以通过实施下面的例子来理解。有几个例子是供参考的，但开发者可以根据需要改变代码。

示例1：下面的代码演示了ajax() 方法，该方法带有 “url “和 “context “参数，通过使用CSS background-color属性在正文文件中添加一个类来改变背景颜色。该类是通过使用jQuery addClass()方法添加的。url “的值将是代码下面提供的 “test.html “文件。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1">
    <script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
    </script>
    <style>
        .bgClass {
            background-color: grey;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>Ajax methods with parameters</h3>
    <p>This is document body with paragraph</p>
    <script>
        .ajax({
            url: "test.html",
            context: document.body
        }).done(function() {
            (this).addClass("bgClass");
        });
    </script>
</body>
</html>
HTML

test.html:该文件用于上述文件中。

<html>
   <p>hello world</p>
</html>
HTML

输出:

jQuery Ajax方法使用的是哪些参数？

例子2：下面的代码演示了ajax() 方法，其中有 “成功 “和 “错误 “参数。url “的值将是代码下面提供的 “sample.html “文件。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script>
        (document).ready(function () {
            ("#btnID").click(function () {
                .ajax({
                    url: "sample.txt", 
                    success: function (output) {
                        ("#divID").html(output);
                    },
                    error: function () {
                        alert("Ajax error!");
                    }
                });
            });
        });
    </script>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <h3>Ajax with parameters</h3>
    <div id="divID">
        <p id="paraID">
            This is paragraph. Ajax is an acronym 
            for Asynchronous Javascript and XML.<br>
            It is used to communicate with the 
            server without refreshing<br>the web 
            page and thus increasing the user
            experience and better performance.
        </p>
    </div>
    <button id="btnID">
        Change the paragraph content
    </button>
</body>
</html>
HTML

sample.txt：此文件用于上述文件。

This is changed paragraph for the HTML document.<br>
There are no such pre-requisites required to understand the latter portion of the article.<br>
Only the basic knowledge of HTML, CSS, and Javascript are good to go.
HTML

输出:

jQuery Ajax方法使用的是哪些参数？

例子3：下面的代码演示了ajax() 方法的 “contentType”、”dataType “和beforeSend()方法参数。url “的值将是代码下面提供的 “url.json “文件。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>jQuery ajax beforeSend() function </title>
    <meta charset="utf-8">
    <script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <h3>jQuery ajax beforeSend() function</h3>
    <button id="buttonID">
        Send the request using ajax beforeSend()
    </button>
    <br>
    <p id="paraID" style=""> </p>
  
    <script type="text/javascript">
        (document).ready(function () {
  
            ('#buttonID').click(function () {
                // url
                var request = .ajax({
                    url: 'url.json',
                    contentType: 'application/json',
                    dataType: 'json',
                    beforeSend: function (jqXHR) {
                        jqXHR.overrideMimeType("application/json");
                        ('#paraID').append(
          '<p><b> The beforeSend() method is called.<b></p>');
                    }
                });
                request.success(function (data, status, jqXhr) {
                    ('#paraID').append('<p><b> The json data : </p></b>');
                    ('#paraID').append('<p><b> Date :</b> '
                        + data.date
                        + '</p>');
                    ('#paraID').append('<p><b> Name :</b> '
                        + data.name
                        + '</p>');
                    ('#paraID').append('<p><b> Time: </b>'
                        + data.time
                        + '</p>');
                });
                request.error(function (jqXhr, textStatus, errorMessage) {
                    ('#paraID').append(
                        '<p><b> The request status:</b> '
                        + status
                        + '</p>');
                    ("#paraID").append("The status is : " + textStatus);
                });
            });
        });
    </script>
</body>
</html>
HTML

url.json:该JSON文件用于上述文件。

{
   "date": "07-15-2022",
   "name": "Ajax learning",
   "time": "11:32:10 AM"
}
HTML

输出:

jQuery Ajax方法使用的是哪些参数？

例子4：下面的代码演示了带有 “contentType”、”dataType “和 “jsonpCallback “参数的ajax（）方法。url “的值将是代码下面提供的 “urljsonP.json “文件。设置jsonpCallback: ‘JSONPResponse’属性，其中 “JSONPResponse “在JSON文件中提到，如下所示。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
    "width=device-width, initial-scale=1">
  
    <script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Ajax methods with parameters</h3>
    <p>This is document body with paragraph</p>
    <script>
        $.ajax({
            url: "urljsonP.json",
            dataType: "jsonp",
            type: "POST",
            jsonpCallback: 'JSONPResponse',
            contentType: "application/json; charset=utf-8",
            success: function (result, status, xhr) {
                console.log(result);
            },
            error: function (xhr, status, error) {
                console.log("Result: " + status + " "
                    + error + " " + xhr.status 
                    + " " + xhr.statusText)
            }
        });
    </script>
</body>
</html>
HTML

urljsonP.json:该JSON文件用于上述文件。

JSONPResponse( {
  "id":  1,
  "name": "accessory",
  "items": [ "book", "pen" ]
})
HTML

输出:

jQuery Ajax方法使用的是哪些参数？

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

jQuery 方法

登录

找回密码？

注册