搜尋
首頁web前端js教程$.ajax()怎樣從伺服器取得json數據

這次帶給大家$.ajax()怎樣從伺服器取得json數據,$.ajax()怎樣從伺服器取得json資料的注意事項有哪些,以下就是實戰案例,一起來看一下。

下面小編就為大家分享一篇基於$.ajax()方法從伺服器獲取json資料的幾種方式總結,具有很好的參考價值,希望對大家有所幫助。一起跟著小編過來看看吧

一.什麼是json

json是一種取代xml的資料結構,和xml相比,它更小巧但描述能力卻很強,網路傳輸資料使用流量更少,速度更快。

json就是一串字串,使用下面的符號標註。

{鍵值對} : json物件

[{},{},{}] :json陣列

"" :雙引號內是屬性或值

: :冒號前為鍵,後面是一個值(這個值可以是基本資料型別的值,也可以是陣列或物件),所以{"age": 18} 可以理解為是一個包含age為18的json對象,而[{"age": 18},{"age": 20}]就表示包含兩個物件的json陣列。也可以使用{"age":[18,20]}來簡化上面的json數組,這是一個擁有一個age數組的物件。

二. $.ajax()方法中dataType屬性的取值

$.ajax()方法中dataType屬性要求為String類型的參數,預期伺服器傳回的資料類型。如果不指定,JQuery將自動根據http包mime資訊傳回responseXML或responseText【在第三部分解釋】,並作為回呼函數參數傳遞。可用的類型如下:

xml:傳回XML文檔,可用JQuery處理。

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

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

json:傳回JSON資料。

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

三. Mime資料類型及response的setContentType()方法

什麼是MIME類型?在把輸出結果傳送到瀏覽器上的時候,瀏覽器必須啟動適當的應用程式來處理這個輸出文檔。這可以透過多種類型MIME(多功能網際郵件擴充協定)來完成。在HTTP中,MIME類型被定義在Content-Type header中。

範例 如,架設你要傳送一個Microsoft Excel檔案到客戶端。那麼這時的MIME類型就是「application/vnd.ms-excel」。在大多數實際情況中,這個檔案然後將傳送給 Execl來處理(假設我們設定Execl為處理特殊MIME類型的應用程式)。在Java中,設定MIME類型的方法是透過Response物件的ContentType屬性。例如常用:response.setContentType("text/html;charset=UTF-8")進行設定。

最早的HTTP協定中,並沒有附加的資料類型訊息,所有傳送的資料都被客戶程式解釋為超文本標記語言HTML 文檔,而為了支援多媒體資料類型,HTTP協定中就使用了附加在文件之前的MIME資料類型資訊來識別資料類型。

每個MIME類型由兩部分組成,前面是資料的大類別,例如文字text、圖象image等,後面定義具體的種類。

常見的MIME類型:

超文本標記語言文字.html,.html text/html

普通文字.txt text/plain

RTF文字.rtf application/rtf

GIF圖形.gif image/gif

JPEG圖形.ipeg,.jpg image/jpeg

au聲音文件.au audio/basic

MIDI音樂檔案mid,.midi audio/midi,audio/x-midi

RealAudio音樂檔案.ra, .ram audio/x-pn-realaudio

MPEG檔.mpg,.mpeg video/mpeg

AVI檔.avi video/x-msvideo

GZIP檔.gz application/x-gzip

TAR文件.tar application/x-tar

客戶程式從伺服器上接收資料的時候,它只是從伺服器接受資料流,並不了解文件的名字,因此伺服器必須使用附加資訊來告訴客戶程式數據的MIME類型。

伺服器在發送真正的資料之前,就要先發送標誌資料的MIME類型的信息,這個訊息使用Content-type關鍵字進行定義,例如對於HTML文檔,伺服器將首先發送以下兩行MIME標識資訊,這個標識並不是真正的資料文件的一部分。

Content-type: text/html

注意,第二行為一個空行,這是必須的,使用這個空行的目的是將MIME資訊與真正的資料內容分隔開。

如前面所說,在Java中,設定MIME類型的方法是透過Response物件的ContentType屬性,設定的方法是使用response.setContentType(MIME)語句,response.setContentType(MIME)的作用是使客戶端瀏覽器,區分不同種類的數據,並根據不同的MIME呼叫瀏覽器內不同的程式嵌入模組來處理相應的數據。

Tomcat的安裝目錄\conf\web.xml中就定義了大量MIME類型 ,可以參考。例如可以設定:

response.setContentType("text/html; charset=utf-8"); html

response.setContentType("text/plain; charset=utf-8") ; 文字

application/json json資料

這個方法設定傳送到客戶端的回應的內容類型,此時回應尚未提交。給出的內容類型可以包括字元編碼說明,例如:text/html;charset=UTF-8。如果該方法在getWriter()方法被調用之前調用,那麼回應的字元編碼將僅從給出的內容類型中設定。此方法如果在getWriter()方法被調用之後或在被提交之後調用,將不會設定回應的字元編碼,在使用http協定的情況中,該方法設定 Content-type實體標頭。

四.使用$.ajax()方法獲取json資料的三種方式

dataType參數的配置決定了jquery如何幫助我們自動解析伺服器傳回的數據,有幾種方式可以取得後台傳回的json字串並解析為json對象,以下是Java為例解釋,以下三中方式的結果都是圖一所示,專案運行在內網,無法截圖,只能拍照,見諒。

1、$.ajax()參數中不設定dataType,後台response也不設定回傳類型,則預設會以普通文字處理【response.setContentType("text /html;charset=utf-8");也是作為文字處理】,js中需要手動使用eval()或$.parseJSON()等方法將傳回的字串轉換為json物件使用。

//Java代码:后台获取单个数控定位器的历史表格的数据
	public void getHistorySingleData() throws IOException{
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setHeader("Content-type", "text/html;charset=UTF-8");
		response.setContentType("text/html;charset=utf-8");
		String deviceName = request.getParameter("deviceName");
		String startDate= request.getParameter("startDate");
		String endDate = request.getParameter("endDate");
		SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
		System.out.println(singleHistoryData.length);
		System.out.println(JSONArray.fromObject(singleHistoryData).toString());//打印:[{"time":"2016-11-11 10:00:00","state":"运行","ball":"锁紧",....},{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....},{},{}....]查到几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
		response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
	}
	/*js代码:选择查询某一时间段的数据,点击查询之后进行显示*/
 $("#search").click(function () {
 	var data1 = [];
 	var n;
 	var deviceName=$("body").attr("id"); 
  var startDate = $("#startDate").val();
  var endDate = $("#endDate").val();
  $.ajax({
   url:"/avvii/chart/getHistorySingleData",
   type:"post",
   data:{
    "deviceName":deviceName,
    "startDate": startDate,
    "endDate": endDate
   },
   success: function (data) {
  	 alert(data);//---->弹出[{"time":"2016-11-11 10:00:00","state":"运行","ball":"锁紧",....},{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....},{},{}....],后台传过来几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
 		 alert(Object.prototype.toString.call(data)); //--->弹出[object String],说明获取的是String类型的数据
  	 var JsonObjs = eval("(" + data + ")");  //或者:var JsonObjs = $.parseJSON(data);
 		 alert(JsonObjs);//alert(JsonObjs);---->弹出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]……后台传过来几条singleHistoryData对象就打印几个[object Object]
    n=JsonObjs.length;
    if(n==0){
   	 alert("您选择的时间段无数据,请重新查询");
    }
 		 for(var i = 0; i 

2、$.ajax()參數中設定dataType="json",則jquery會自動將傳回的字串轉換為json物件。後台可以設定為:【推薦】response.setContentType("text/html;charset=utf-8");或response.setContentType("application/json;charset=utf-8");

	//Java代码:后台获取单个数控定位器的历史表格的数据
	public void getHistorySingleData() throws IOException{
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setHeader("Content-type", "text/html;charset=UTF-8");
		response.setContentType("text/html;charset=utf-8");
		String deviceName = request.getParameter("deviceName");
		String startDate= request.getParameter("startDate");
		String endDate = request.getParameter("endDate");
		SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
		System.out.println(singleHistoryData.length);
		System.out.println(JSONArray.fromObject(singleHistoryData).toString());//打印:[{"time":"2016-11-11 10:00:00","state":"运行","ball":"锁紧",....},{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....},{},{}....]查到几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
		response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
	}
/*js代码:页面首次加载时,显示规定时间段的数据*/ 
	var data1 = [];
	var deviceName=$("body").attr("id"); 
 var startDate = $("#startDate").val("2000-01-01 00:00:00");
 var endDate = $("#endDate").val("2018-01-01 00:00:00");
 $.ajax({
  url:"/avvii/chart/getHistorySingleData",
  type:"post",
  data:{
   "deviceName":deviceName,
   "startDate": "2000-01-01 00:00:00",
   "endDate": "2018-01-01 00:00:00"
  },
  dataType:"json",
  success: function (data) {
 	 alert(data);//---->弹出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]……后台传过来几条singleHistoryData对象就打印几个json对象:[object Object]
   for(var i = 0; i <p style="text-align: left;"># 3.ajax方法參數中不指定dataType,後台設定回傳類型為"application/json"。這樣jquery就會根據mime類型來智慧判斷,並自動解析成json物件。 </p><pre class="brush:php;toolbar:false">
	//Java代码:后台获取单个数控定位器的历史表格的数据
	public void getHistorySingleData() throws IOException{
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setHeader("Content-type", "text/html;charset=UTF-8");
		response.setContentType("application/json;charset=utf-8");
		String deviceName = request.getParameter("deviceName");
		String startDate= request.getParameter("startDate");
		String endDate = request.getParameter("endDate");
		SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
		System.out.println(singleHistoryData.length);
		System.out.println(JSONArray.fromObject(singleHistoryData).toString());//打印:[{"time":"2016-11-11 10:00:00","state":"运行","ball":"锁紧",....},{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....},{},{}....]查到几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
		response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
	}
 /*js代码:页面首次加载时,显示规定时间段的数据*/ 
	var data1 = [];
	var deviceName=$("body").attr("id"); 
 var startDate = $("#startDate").val("2000-01-01 00:00:00");
 var endDate = $("#endDate").val("2018-01-01 00:00:00");
 $.ajax({
  url:"/avvii/chart/getHistorySingleData",
  type:"post",
  data:{
   "deviceName":deviceName,
   "startDate": "2000-01-01 00:00:00",
   "endDate": "2018-01-01 00:00:00"
  },
  success: function (data) {
 	 alert(data);//---->弹出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]……后台传过来几条singleHistoryData对象就打印几个json对象:[object Object]
   for(var i = 0; i <p style="text-align: left;">注意:只要前台或後台有一處設定了返回json對象,就無需使用eval()方法或$.parseJSON()方法解析了,再解析就出錯。 </p><p style="text-align: left;"><span style="background-color: #ccffcc">總結:以上幾種方式,建議使用第二種方式,方便且不易出錯。 </span></p><p style="text-align: left;"><span style="color: #ff0000"><strong>五. eval()方法</strong></span></p><p style="text-align: left;">var json物件=eval('('+json資料+')');大括號​​括起來的內容被eval()執行後傳回的是一個JSON對象。 </p><p style="text-align: left;">eval函數的工作原理:eval函數會評估一個給定的含有JavaScript程式碼的字串,並且試圖去執行包含在字串裡的表達式或一系列的合法的JavaScript語句。 eval函數將把最後一個表達式或語句所包含的值或引用作為回傳值。 </p><p style="text-align: left;"><span style="color: #ff00ff"><strong>為什麼要 eval這裡要加上 「("("+data+")");//」呢? </strong></span></p><p style="text-align: left;"><strong>原因在於:</strong>eval本身的問題。 由於json是以”{}”的方式來開始以及結束的,在JS中,它會被當成一個語句塊來處理,所以必須強制性的將它轉換成一種表達式。加上圓括號的目的是迫使eval函數在處理JavaScript程式碼的時候強制將括號內的表達式(expression)轉換為對象,而不是作為語句(statement)來執行。舉一個例子,例如物件字面量{},如若不加外層的括號,那麼eval會將大括號識別為JavaScript程式碼區塊的開始和結束標記,那麼{}將會被認為是執行了一句空語句。 </p><p style="text-align: left;">以上這篇基於$.ajax()方法從伺服器取得json資料的幾種方式總結就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。 </p><p>相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! </p><p>推薦閱讀:</p><p><a href="http://www.php.cn/js-tutorial-388558.html" target="_blank">jquery+css3做出直播平台的導航</a></p><p><a href="http://www.php.cn/js-tutorial-388554.html" target="_blank">滑鼠回應緩衝動畫效果如何實現? </a><br></p><p><a href="http://www.php.cn/js-tutorial-388547.html" target="_blank">如何實現滾動條滑到底部時自動載入更多內容</a></p><p><a href="http://www.php.cn/js-tutorial-388538.html" target="_blank">jQuery新增li標籤以及新增屬性的方法</a><br></p>

以上是$.ajax()怎樣從伺服器取得json數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
node.js流帶打字稿node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O,這在很大程度上要歸功於流。 流媒體匯總處理數據,避免內存過載 - 大型文件,網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript:性能和效率注意事項Python vs. JavaScript:性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript的起源:探索其實施語言JavaScript的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來:趨勢和預測Python和JavaScript的未來:趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MantisBT

MantisBT

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

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器