jQuery的ajax里dataType預期服務器返回數據類型


前言:

  jquery異步請求ajax()之dataType參數講解

 

(1)dataType簡介:

從服務器返回你期望的數據類型(意思是指服務器返回數據后,在執行success方法前,前端jquery先對結果轉成你設定的數據類型)
。如果沒有指定,jQuery將嘗試通過MIME類型的響應信息來智能判斷,例如java服務端設置response.setContentType(MIME)和ajax的屬性contentType都可以設置MIME類型,
其作用是使客戶端瀏覽器,區分不同種類的數據,並根據不同的MIME調用瀏覽器內不同的程序嵌入模塊來處理相應的數據。(一個XML MIME類型就被識別為XML,
在1.4中 JSON將生成一個JavaScript對象,在1.4中 script 將執行該腳本,其他任何類型會返回一個字符串)。

 

(2)可用的類型(以及結果作為第一個參數傳遞給成功回調函數)

"xml": 返回XML文檔,可以通過jQuery處理。

"html": 返回純文本HTML文本;包含的script標簽會在插入DOM時執行。

"script": 把響應的結果當作JavaScript 執行,並將其當作純文本返回。默認情況下會通過在URL中附加查詢字符串變量 ,_=[TIMESTAMP], 禁用緩存結果,除非設置了cache參數為true。注意: 在遠程請求時(不在同一個域下),所有POST請求都將轉為GET請求。(愚人碼頭注:因為將使用DOM的script標簽來加載)

"json":把響應的結果當作 JSON 執行,並返回一個JavaScript對象。跨域"json" 請求轉換為"jsonp",除非該請求在其請求選項中設置了jsonp:false。JSON 數據以嚴格的方式解析; 任何畸形的JSON將被拒絕,並且拋出解析錯誤信息。在jQuery1.9中,一個空響應也將被拒絕;服務器應該返回null或 {}響應代替。

"jsonp": 以 JSONP 的方式載入 JSON 數據塊。會自動在所請求的URL最后添加"?callback=?"。默認情況下會通過在URL中附加查詢字符串變量 ,_=[TIMESTAMP], 禁用緩存結果,除非設置了cache參數為true。

"text": 返回純文本字符串。

 

(3)引用W3School對dataType的一段解釋

dataType
類型:String

 預期服務器返回的數據類型。如果不指定,jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷,
 比如 XML MIME 類型就被識別為 XML。
 在 1.4 中,JSON 就會生成一個 JavaScript 對象,而 script 則會執行這個腳本。
 隨后服務器端返回的數據會根據這個值解析后,傳遞給回調函數。可用值:

 "xml": 返回 XML 文檔,可用 jQuery 處理。
 "html": 返回純文本 HTML 信息;包含的 script 標簽會在插入 dom 時執行。
 "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意:在遠    程請求時(不在同一個域下),所有 POST 請求都將轉為 GET 請求。(因為將使用 DOM 的 script標簽來加載)
 "json": 返回 JSON 數據 。
 "jsonp": JSONP 格式。使用 JSONP 形式調用函數時,如 "myurl?callback=?" jQuery 將自動替換     ? 為正確的函數名,以執行回調函數。
 "text": 返回純文本字符串

 

(4)注意

1、dataType不要寫成datatype
2、dataType="json",如果服務器端返回的是一個json格式的字符串,Jquery會調用Json.prase()方法將其轉換成JSON對象。另外如果服務器端返回的不是json格式的數據,
  就會直接進入error函數回調。
3、dataType="text",預計服務器端返回的數據就是純文本字符串型,json格式數據還是會以json字符串的形式進入success函數回調

 

(5)案例解析

設計數據庫(用戶數據模型)

   1、分析

因為除了用戶數據,還有話題相關數據、評論相關數據等,所以這里需要設計多個數據模型,將其放到models目錄下

    

 

     models下有多個數據模型,代表多個集合。user.js代表用戶數據集合

  2、設計user.js用戶數據集合

注意:集合命名為大寫單數User,最終數據庫集合名會變為小寫復數users

    

  3、設計文檔格式

    首先是基本信息

    

 

     另外,除了基本信息,還有些看不到的信息,例如創建時間、修改時間... ...,這里加入創建即注冊時間

    

 

     重點分析:

    

這里可能會有疑問:為什么Date.now沒有加函數執行符?
  原因:加入函數執行符會即時調用

    

這里傳入方法Date.now,當你去new Model時即實例化模型,如果沒有傳遞create_time,則mongoose就會調用default指定的Date.now方法使用其返回值作為默認值
對比分析:例如type為a+b,則在new Schema時便自動計算出結果

    

同理,在創建時間處,如果加入函數執行符,則會立即執行。這時變成了寫死的時間

    

 

   接下來設計修改時間文檔格式

    

 

   此外還有用戶頭像avatar,在用戶信息設置處有個默認頭像

  

 

   

 

   此外,在用戶信息設置里還有介紹bio

  

 

   加下來還有性別gender

  

 

   接下來還有生日,生日這里不用加默認值

  

接下來結合業務邏輯需求,看下還需要哪些數據,如下所示

  

 

   

 

   分析完畢后,此外還有賬戶狀態status。例如管理員管理用戶狀態,禁言、封號等等... ...

  

此外也可以通過mongoose框架模型層次,對數據格式做限制,例如email必須為郵箱格式、昵稱nickname長度不能超過10位等等... ...,需要用到驗證中間件,后期介紹

  

 

(12)處理注冊請求

  1、開啟數據庫服務,連接數據庫

    

  2、基於之前設計的用戶數據模型,進行業務操作(注冊、登錄等)

    注冊即為保存數據、登錄為查詢數據

    在正式操作前,首先在編碼里連接數據庫

    

 

     目前為止先寫到這里,但操作其他數據時(topic.js、comment.js)還需要再次連接,肯定不合適

    所以這里做下修改,新建mongoose.js操作數據庫,如下所示

復制代碼
/*1、引包*/
var mongoose = require('mongoose')

var db_url = 'mongodb://localhost/blog'
/*2、連接數據庫*/
/*mongoose.connect('mongodb://localhost:27017/0204')默認開啟的端口為27017*/
mongoose.connect(db_url)/*這里也可以將端口去掉,默認便是27017*/
/* 鏈接成功 */
mongoose.connection.on('connected', function() {
  console.log('Mongoose connection open to ' + db_url);
});
/* 鏈接異常 */
mongoose.connection.on('error', function(error) {
  console.log('Mongoose connection error:' + err);
});
/* 鏈接斷開 */
mongoose.connection.on('disconnected', function() {
  console.log('Mongoose connection disconnected');
});

module.exports = mongoose;
復制代碼

    之后在其他文件調用即可

    

 

     

 

     首先查詢用戶郵箱是否存在,然后查詢用戶昵稱是否存在。這里我們使用fAPI為indOne,find方法即使只查出一個,也會將其放入數組

    

 

     如果郵箱已經存在,接下來需要判斷昵稱,查詢文檔,找到or操作

    

 

     

 

     所以接下來利用or

      

 

     接下來直接判斷“郵箱或者昵稱是否重復。如果兩者有一個存在則提示,郵箱或者昵稱已存在”

當然可能有的網站在切換輸入框時便直接判斷,這樣的話需要將郵箱、昵稱分開編寫API接口

    

注意:這里res.send()返回結果需要結合客戶端代碼進行分析。
    如下所示,查看后即可得知,該操作是表單操作post異步請求,需要服務端返回JSON數據,之后客戶端根據JSON內容進行業務交互

    

    接下來做下測試

    

 

     

此時發現客戶端沒有輸出,服務端執行到了OK。
那么問題來了:服務端發送了響應數據,為什么客戶端沒有輸出呢?(服務端發送了響應數據為ok,如下所示)

    

原因:客戶端ajax里指定期望服務器返回數據格式dataType為json,但服務端發送的不是json。所以客戶端解析不到,所以客戶端沒有報錯,也看不見
  接下來做下測試,給客戶端發送響應數據,格式為json

    

 

     此時在做下測試,點擊注冊按鈕后,便可以發現客戶端打印數據

    

分析:jQuery的ajax里的dataType:json的作用為
    預期后台返回結果為json字符串,如果返回的是json字符串,那么直接將其解析轉為js可操作的對象,結合文章jQuery的ajax里dataType預期服務器返回數據類型.理解

    如果后台返回結果為字符串,而不是json格式字符串,那么無法進行轉換,如下所示

    

 

     如果這里是純字符串,那么肯定無法正常轉換。但客戶端里面嘗試轉換對象格式失敗,雖然無法正常輸出,但也不會報錯

 

  3、后台發送json格式響應

    如下所示,直接發送json格式響應

    

 

     所以這里使用JSON.stringify()進行轉換

    

 

     此時注冊頁面提交后便可以輸出后台發送的響應

    

 

 

 

.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM