搜尋
首頁web前端js教程$.Ajax()方法的參數如何使用

這次帶給大家$.Ajax()方法的參數如何使用,使用$.Ajax()方法的注意事項有哪些,下面就是實戰案例,一起來看一下。

先跟大家介紹下Ajax概念

AJAX即「Asynchronous Javascript And XML」(異步JavaScript和XML),是指一種創建互動式網頁應用的網頁開發技術。

AJAX = 非同步 JavaScript和XML(標準通用標記語言的子集)。

AJAX 是一種用於建立快速動態網頁的技術。

透過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某個部分進行更新。

傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。

ajax方法

$.ajax()方法是jQuery最底層的Ajax實作。它的結構為:

  $.ajax(options)

#該方法只有一個參數,但是這個物件裡包含了$.ajax()方法所需的請求設定以及回呼函數等訊息,參數以key/value的形式存在,所有的參數都是可選的。常用參數請見下表:

1.url

#要求String類型的參數,(預設為目前位址)發送請求的頁面。

2.type

要求為String類型的參數,請求方式(post或get)預設為get。注意其他http請求方法,例如put和delete也可以使用,但僅有部分瀏覽器支援。

3.timeout

要求為Number類型的參數,設定請求逾時時間(毫秒)。此設定將覆蓋$.ajaxSetup()方法的全域設定。

4.async

要求為Boolean類型的參數,預設為true,所有請求均為非同步請求。如果需要同步請求,請將此選項設為false。注意,同步請求將鎖住瀏覽器,使用者其他操作必須等待請求完成才可執行。

5.cache

要求為Boolean類型的參數,預設為true(當dataType為Script時,預設為false),設定false將不會從瀏覽器快取中載入請求資訊。

6.data

要求為Object或String類型的參數,傳送到伺服器的資料。如果不是字串,將自動轉換為字串格式。 get請求中將附加在URL後。防止這種自動轉換,可以查看  processData選項。物件必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組,JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

7.dataType

要求為String類型的參數,預期伺服器傳回的資料類型。如果不指定,jQuery將自動根據HTTP包的mine資訊傳回responseXML或responseText,並作為回呼函數參數傳遞。可用的類型如下:

  xml:返回XML文檔,可用jQuery處理。

  html:傳回純文字HTML資訊;包含的script標籤會在插入DOM時執行。

  script:傳回純文字javascript程式碼。不會自動快取結果,除非設定了cache參數。注意在遠端請求時(不在同一個網域下),所有post請求都會轉為get請求。

  json:傳回JSON資料。

  jsonp:JSON格式。使用JSONP形式呼叫函數時,例如myurl?callback=?,JQuery將自動替換後一個“?”為正確的函數名,以執行回調函數。

  text:傳回純文字字串。

8.beforeSend

要求為Function類型的參數,傳送請求前可以修改XMLHttpRequest物件的函數,例如新增自訂HTTP頭。在beforeSend中如果回傳false可以取消本次ajax請求。 XMLHttpRequest物件是唯一的參數。

function(XMLHttpRequest){
    this;//调用本次ajax请求时传递的options参数
  }

9.complete

#要求為Function類型的參數,請求完成後呼叫的回呼函數(請求成功或失敗均呼叫) 。參數:XMLHttpRequest物件和一個描述成功請求類型的字串。

  function(XMLHttpRequest,textStatus){
    this; //调用本次ajax请求时传递的options参数
  }

10.success

#要求為Function類型的參數,請求成功後呼叫的回呼函數,有兩個參數。

  (1)由伺服器傳回,並根據dataType參數進行處理後的資料。

  (2)描述狀態的字串。

  function(data,textStatus){
    //data可能是xmlDoc、jsonObj、html、text等
    this; //调用本次ajax请求时传递的options参数
  }

11.error

#要求為Function類型的參數,請求失敗時被呼叫的函數。此函數有3個參數,分別是XMLHttpRequest物件、錯誤訊息、捕獲的錯誤物件(可選)。 ajax事件函數如下:

  function(XMLHttpRequest,textStatus,errorThrown){
    //通常情况下textStatus和errorThrown只有其中一个包含信息
    this; //调用本次ajax请求时传递的options参数
  }

12.contentType

#要求為String類型的參數,當傳送訊息至伺服器時。內容編碼類型預設為"application/x-www-form-urlencoded"。此預設值適合大多數應用場合。

13.dataFilter

要求為Function類型的參數,給Ajax傳回的原始資料進行預處理的函數。提供data和type兩個參數。 data是Ajax傳回的原始數據,type是呼叫jQuery.ajax時提供的dataTYpe參數。函數傳回的值將由jQuery進一步處理。

  function(data,type){
    //返回处理后的数据
    return data;
  }

14.global

#要求為Boolean類型的參數,預設為true。表示是否觸發全域ajax事件。設定為false將不會觸發全域ajax事件,ajaxStart和ajaxStop可用於控制各種ajax事件。

15.ifModified

#要求為Boolean類型的參數,預設為false。僅在伺服器資料改變時取得新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false,即忽略頭資訊。

16.jsonp

要求為String類型的參數,在一個jsonp請求中重寫回呼函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裡的"callback"部分,例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。

17.username

要求為String類型的參數,用於回應HTTP存取認證請求的使用者。

18.password

要求為String類型的參數,用於回應HTTP存取認證請求的密碼。

19.processData

#要求為Boolean類型的參數,預設為true。預設情況下,發送的資料將被轉換為物件(從技術角度來講而非字串)以配合預設內容類型"application/x-www-form-urlencoded"。如果要傳送DOM樹資訊或其他不希望轉換的訊息,請設定為false。

20.scriptCharset

要求為String類型的參數,只有當請求時dataType為"jsonp"或"script",且type是GET時才會用於強制修改字元集(charset)。通常在本地和遠端的內容編碼不同時使用。

案例代碼:

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = '';
    $.each(data, function(commentIndex, comment){
    html += '<p></p><h6>' + comment['username']
      + ':</h6><p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});

知識連結:

1、$.each()函數:$.each( )函數不同於jQuery物件的each()方法,它是一個全域函數,不操作jQuery物件。此函數接收兩個參數,第1個參數是一個陣列或對象,第2個參數是一個回呼函數。回呼函數有兩個參數:第1個參數為陣列的索引或物件的成員,第2個參數為對應的變數或內容。

  $.each(data,function(commentIndex,comment){
  //doSomething;
 })

2、ajaxStart()与ajaxStop():当Ajax请求开始时,会触发ajaxStart()方法的回调函数。当Ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们。

有时候页面需要加载一些图片,可能速度回比较慢,如果在加载过程中,不给用户提供一些提示和反馈信息,很容易让用户误认为按钮单击无用,使用户对网站失去信息。

此时,我们就需要为网页添加一个提示信息,常用的提示信息是“加载中...”,代码如下:

<p>加载中...</p>

当Ajax请求开始时,将此元素显示,用来提示用户Ajax请求正在进行;当Ajax请求结束后,将此元素隐藏。代码如下:

$("#loading").ajaxStart(function(){
    $(this).show();
  }).ajaxStop(function(){
 $(this).hide();
 })

好了,下面再给大家分享一个案例代码:

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = ''; 
    $.each(data, function(commentIndex, comment){
    html += '<p></p><h6>' + comment['username']
      + ':</h6><p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});

end,代码到此结束。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

ajax怎么实现网络请求的封装

Ajax和JavaScript使用的区别

以上是$.Ajax()方法的參數如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何在Go中使用命名管道?如何在Go中使用命名管道?May 11, 2023 pm 04:22 PM

命名管道是一种在操作系统中相对比较低级的进程通信方式,它是一种以文件为中介的进程通信方式。在Go语言中,通过os包提供了对命名管道的支持。在本文中,我们将介绍如何在Go中使用命名管道来实现进程间通信。一、命名管道的概念命名管道是一种特殊的文件,可以被多个进程同时访问。在Linux系统中,命名管道是一种特殊的文件类型,它们存在于文件系统的某个位置上,并且可以在

如何在Go中使用第三方库?如何在Go中使用第三方库?May 11, 2023 pm 03:30 PM

在Go语言中,使用第三方库是非常方便的。许多优秀的第三方库和框架可以帮助我们快速地开发应用程序,同时也减少了我们自己编写代码的工作量。但是如何正确地使用第三方库,确保其稳定性和可靠性,是我们必须了解的一个问题。本文将从以下几个方面介绍如何使用第三方库,并结合具体例子进行讲解。一、第三方库的获取Go语言中获取第三方库有以下两种方式:1.使用goget命令首先

如何在PHP中使用协程?如何在PHP中使用协程?May 12, 2023 am 08:10 AM

随着传统的多线程模型在高并发场景下的性能瓶颈,协程成为了PHP编程领域的热门话题。协程是一种轻量级的线程,能够在单线程中实现多任务的并发执行。在PHP的语言生态中,协程得到了广泛的应用,比如Swoole、Workerman等框架就提供了对协程的支持。那么,如何在PHP中使用协程呢?本文将介绍一些基本的使用方法以及常见的注意事项,帮助读者了解协程的运作原理,以

如何在PHP中使用变量函数如何在PHP中使用变量函数May 18, 2023 pm 03:52 PM

变量函数是指可以使用变量来调用函数的一种特殊语法。在PHP中,变量函数是非常有用的,因为它可以让我们更加灵活地使用函数。在本文中,我们将介绍如何在PHP中使用变量函数。定义变量函数在PHP中,变量函数的定义方式非常简单,只需要将要调用的函数名赋值给一个变量即可。例如,下面的代码定义了一个变量函数:$func='var_dump';这里将var_dump函

如何在 Windows 11 中按需使用 OneDrive 的文件如何在 Windows 11 中按需使用 OneDrive 的文件Apr 14, 2023 pm 12:34 PM

&lt;p&gt;Windows 系统上的 OneDrive 应用程序允许您将文件存储在高达 5 GB 的云上。OneDrive 应用程序中还有另一个功能,它允许用户选择一个选项,是将文件保留在系统空间上还是在线提供,而不占用您的系统存储空间。此功能称为按需文件。在这篇文章中,我们进一步探索了此功能,并解释了有关如何在 Windows 11 电脑上的 OneDrive 中按需使用文件的各种选项。&lt;/p&gt;&lt;h2&gt;如何使用 On

如何在Go中使用WebSocket?如何在Go中使用WebSocket?May 11, 2023 pm 04:17 PM

近年来,WebSocket技术已经成为了Web开发中不可或缺的一部分。WebSocket是一种在单个TCP连接上进行全双工通信的协议,它使得客户端和服务器之间的通信更加流畅和高效。如今,很多现代的Web应用程序都使用了WebSocket技术,例如实时聊天、在线游戏以及实时数据可视化等。Go语言作为一个现代的编程语言,自然也提供了很好的支持WebSock

如何在Go中使用音频处理?如何在Go中使用音频处理?May 11, 2023 pm 04:37 PM

随着音频处理在各种应用场景中的普及,越来越多的程序员开始使用Go编写音频处理程序。Go语言作为一种现代化的编程语言,具有优秀的并发性和高效率的特点,使用它进行音频处理十分方便。本文将介绍如何在Go中使用音频处理技术,包括读取、写入、处理和分析音频数据等方面的内容。一、读取音频数据在Go中读取音频数据有多种方式。其中比较常用的是使用第三方库进行读取,比如go-

如何在PHP中使用数据聚合函数如何在PHP中使用数据聚合函数May 18, 2023 pm 02:51 PM

数据聚合函数是一种用于处理数据库表中多行数据的函数。在PHP中使用数据聚合函数可以使得我们方便地进行数据分析和处理,例如求和、平均数、最大值、最小值等。下面将介绍如何在PHP中使用数据聚合函数。一、介绍常用的数据聚合函数COUNT():计算某一列的行数。SUM():计算某一列的总和。AVG():计算某一列的平均值。MAX():取出某一列的最大值。MIN():

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。