前言:
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()進行轉換

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

.

