前言：

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

（1）dataType簡介：

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

（2）可用的類型（以及結(jié)果作為第一個參數(shù)傳遞給成功回調(diào)函數(shù)）

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

"html": 返回純文本HTML文本；包含的script標(biāo)簽會在插入DOM時執(zhí)行。

"script": 把響應(yīng)的結(jié)果當(dāng)作JavaScript 執(zhí)行，并將其當(dāng)作純文本返回。默認(rèn)情況下會通過在URL中附加查詢字符串變量 ，_=[TIMESTAMP]， 禁用緩存結(jié)果，除非設(shè)置了cache參數(shù)為true。注意: 在遠(yuǎn)程請求時(不在同一個域下)，所有POST請求都將轉(zhuǎn)為GET請求。(愚人碼頭注：因為將使用DOM的script標(biāo)簽來加載)

"json":把響應(yīng)的結(jié)果當(dāng)作 JSON 執(zhí)行，并返回一個JavaScript對象。跨域"json" 請求轉(zhuǎn)換為"jsonp"，除非該請求在其請求選項中設(shè)置了jsonp:false。JSON 數(shù)據(jù)以嚴(yán)格的方式解析; 任何畸形的JSON將被拒絕，并且拋出解析錯誤信息。在jQuery1.9中，一個空響應(yīng)也將被拒絕;服務(wù)器應(yīng)該返回null或 {}響應(yīng)代替。

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

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

（3）引用W3School對dataType的一段解釋

dataType
類型：String

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

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

（4）注意

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

（5）案例解析

設(shè)計數(shù)據(jù)庫（用戶數(shù)據(jù)模型）

　　1、分析

因為除了用戶數(shù)據(jù)，還有話題相關(guān)數(shù)據(jù)、評論相關(guān)數(shù)據(jù)等，所以這里需要設(shè)計多個數(shù)據(jù)模型，將其放到models目錄下

　　　　

　　　　models下有多個數(shù)據(jù)模型，代表多個集合。user.js代表用戶數(shù)據(jù)集合

　　2、設(shè)計user.js用戶數(shù)據(jù)集合

注意：集合命名為大寫單數(shù)User，最終數(shù)據(jù)庫集合名會變?yōu)樾憦?fù)數(shù)users

　　　　

　　3、設(shè)計文檔格式

　　　　首先是基本信息

　　　　

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

　　　　

　　　　重點(diǎn)分析：

　　　　

這里可能會有疑問：為什么Date.now沒有加函數(shù)執(zhí)行符？
　　原因：加入函數(shù)執(zhí)行符會即時調(diào)用

　　　　

這里傳入方法Date.now，當(dāng)你去new Model時即實(shí)例化模型，如果沒有傳遞create_time，則mongoose就會調(diào)用default指定的Date.now方法使用其返回值作為默認(rèn)值
對比分析：例如type為a+b，則在new Schema時便自動計算出結(jié)果

　　　　

同理，在創(chuàng)建時間處，如果加入函數(shù)執(zhí)行符，則會立即執(zhí)行。這時變成了寫死的時間

　　　　

　　接下來設(shè)計修改時間文檔格式

　　　　

　　此外還有用戶頭像avatar，在用戶信息設(shè)置處有個默認(rèn)頭像

　　

　　

　　此外，在用戶信息設(shè)置里還有介紹bio

　　

　　加下來還有性別gender

　　

　　接下來還有生日，生日這里不用加默認(rèn)值

　　

接下來結(jié)合業(yè)務(wù)邏輯需求，看下還需要哪些數(shù)據(jù)，如下所示

　　

　　

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

　　

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

　　

（12）處理注冊請求

　　1、開啟數(shù)據(jù)庫服務(wù)，連接數(shù)據(jù)庫

　　　　

　　2、基于之前設(shè)計的用戶數(shù)據(jù)模型，進(jìn)行業(yè)務(wù)操作（注冊、登錄等）

　　　　注冊即為保存數(shù)據(jù)、登錄為查詢數(shù)據(jù)

　　　　在正式操作前，首先在編碼里連接數(shù)據(jù)庫

　　　　

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

　　　　所以這里做下修改，新建mongoose.js操作數(shù)據(jù)庫，如下所示

/*1、引包*/
var mongoose = require('mongoose')

var db_url = 'mongodb://localhost/blog'
/*2、連接數(shù)據(jù)庫*/
/*mongoose.connect('mongodb://localhost:27017/0204')默認(rèn)開啟的端口為27017*/
mongoose.connect(db_url)/*這里也可以將端口去掉，默認(rèn)便是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;

　　　　之后在其他文件調(diào)用即可

　　　　

　　　　

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

　　　　

　　　　如果郵箱已經(jīng)存在，接下來需要判斷昵稱，查詢文檔，找到or操作

　　　　

　　　　

　　　　所以接下來利用or

　　　　

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

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

　　　　

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

　　　　

　　　　接下來做下測試

　　　　

　　　　

此時發(fā)現(xiàn)客戶端沒有輸出，服務(wù)端執(zhí)行到了OK。
那么問題來了：服務(wù)端發(fā)送了響應(yīng)數(shù)據(jù)，為什么客戶端沒有輸出呢？(服務(wù)端發(fā)送了響應(yīng)數(shù)據(jù)為ok，如下所示)

　　　　

原因：客戶端ajax里指定期望服務(wù)器返回數(shù)據(jù)格式dataType為json，但服務(wù)端發(fā)送的不是json。所以客戶端解析不到，所以客戶端沒有報錯，也看不見
　　接下來做下測試，給客戶端發(fā)送響應(yīng)數(shù)據(jù)，格式為json

　　　　

　　　　此時在做下測試，點(diǎn)擊注冊按鈕后，便可以發(fā)現(xiàn)客戶端打印數(shù)據(jù)

　　　　

分析：jQuery的ajax里的dataType:json的作用為
    預(yù)期后臺返回結(jié)果為json字符串，如果返回的是json字符串，那么直接將其解析轉(zhuǎn)為js可操作的對象，結(jié)合文章jQuery的ajax里dataType預(yù)期服務(wù)器返回數(shù)據(jù)類型.理解

　　　　如果后臺返回結(jié)果為字符串，而不是json格式字符串，那么無法進(jìn)行轉(zhuǎn)換，如下所示

　　　　

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

　　3、后臺發(fā)送json格式響應(yīng)

　　　　如下所示，直接發(fā)送json格式響應(yīng)

　　　　

　　　　所以這里使用JSON.stringify()進(jìn)行轉(zhuǎn)換

　　　　

　　　　此時注冊頁面提交后便可以輸出后臺發(fā)送的響應(yīng)

　　　　

.

總結(jié)

以上是生活随笔為你收集整理的jQuery的ajax里dataType预期服务器返回数据类型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。