在ajax請求中,contentType 和 dataType 的區別?


一、在ajax請求中,contentType 和 dataType 的區別?
    
1.contentType    內容類型。
    1.1默認是 “application/x-www-form-urlencoded”,這種情況。
        contentType :"application/x-www-form-urlencoded; charset=UTF-8",
    
        此時,默認值適合大多數情況,當你明確的傳遞一個content-type給$.ajax()
        那么他必定會發送給服務器。(沒有數據也會發送)
    
    1.2 其他可選擇的類型:form  x-www-form-orlencoded 、raw binary .
    
    
2.dataType  數據類型。
    預期服務器返回的數據類型。如果不指定,jquery 將自動根據http 包 mime信息來智能判斷。
/*
    2.1 xml mime的類型就被識別為xml。
    
    2.2 HTML 返回HTML信息,包含的script標簽會在插入DOM時候執行。
    
    2.3 script 返回純文本的JavaScript代碼,不會自動緩存結果。
        除非設置了,“cache”參數,
        
    2.4 json返回json的數據            dataType: "json",
    
    2.5 jsonp     jsonp格式,使用jsonp形式調用函數時候,如“myurl?callback=?”
                jquery 將自動替換為正確的函數名,以達到執行回調函數的目的。
        
    
*/

 

二、代碼示例(用戶貸款頁面)

        //用form表單將需要獲得的數據包起來,設置一個id userData 獲取表單中的數據。
        <form method="post" action="/loanMoney"  id="userData">
                            <div class="part1">
                                <div class="item col-xs-12">
                                    <span class="intelligent-label f-fl"><b class="ftx04">*</b>借款金額:</span>
                                    <div class="f-fl item-ifo">
                                        <input type="text" class="txt03 f-r3 required" keycodes="tel" tabindex="2" data-valid="isNonEmpty" data-error="借款金額不能為空" maxlength="10" name="money" id="money">
                                        <span class="ie8 icon-close close hide"></span>
                                        <label class="icon-sucessfill blank hide"></label>
                                        <label class="focus">請填寫借款金額</label>
                                        <label class="focus valid"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="part1">
                                <div class="item col-xs-12">
                                    <span class="intelligent-label f-fl"><b class="ftx04">*</b>借款時間:</span>
                                    <div class="f-fl item-ifo">
                                        <input type="text" class="txt03 f-r3 required" keycodes="tel" tabindex="2" data-valid="isNonEmpty" data-error="借款時間不能為空" maxlength="20" name="loanTime" id="loanTime">
                                        <span class="ie8 icon-close close hide"></span>
                                        <label class="icon-sucessfill blank hide"></label>
                                        <label class="focus">請填寫借款時間</label>
                                        <label class="focus valid"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="part1">
                                <div class="item col-xs-12">
                                    <span class="intelligent-label f-fl"><b class="ftx04">*</b>貸款期數:</span>
                                    <div class="f-fl item-ifo">
                                        <select name="repaymentPeriod" id="repaymentPeriod">
                                            <option value="0">一個月</option>
                                            <option value="1">三個月</option>
                                            <option value="2">六個月</option>
                                            <option value="3">十二個月</option>
                                            <option value="4">二十四個月</option>
                                        </select>
                                        <span class="ie8 icon-close close hide"></span>
                                        <label class="icon-sucessfill blank hide"></label>
                                        <label class="focus">請填寫貸款期數</label>
                                        <label class="focus valid"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="part1">
                                <div class="item col-xs-12">
                                    <span class="intelligent-label f-fl"><b class="ftx04">*</b>還款方式:</span>
                                    <div class="f-fl item-ifo">
                                        <select name="repayType" id="repayType">
                                            <option value="0">先息后本</option>
                                            <option value="1">等額本息</option>
                                            <option value="2">一次性還款</option>
                                        </select>
                                        <span class="ie8 icon-close close hide"></span>
                                        <label class="icon-sucessfill blank hide"></label>
                                        <label class="focus">請填寫還款方式</label>
                                        <label class="focus valid"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="part1">
                                <div class="item col-xs-12">
                                    <span class="intelligent-label f-fl"><b class="ftx04">*</b>收款銀行卡號:</span>
                                    <div class="f-fl item-ifo">
                                        <input type="text" class="txt03 f-r3 required" keycodes="tel" tabindex="2" data-valid="isNonEmpty" data-error="銀行卡號不能為空" maxlength="20" name="cardNo" id="cardNo">
                                        <span class="ie8 icon-close close hide"></span>
                                        <label class="icon-sucessfill blank hide"></label>
                                        <label class="focus">請填寫銀行卡號</label>
                                        <label class="focus valid"></label>
                                    </div>
                                </div>
                            </div>

                            <div class="part1">
                                <div class="item col-xs-12">
                                    <span class="intelligent-label f-fl">&nbsp;</span>
                                    <div class="f-fl item-ifo">
                                        <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part1">提交申請</a>
                                    </div>
                                   </div>
                               </div>
                            </form>




ajax部分

    //給提交按鈕 增加一個id (btn_part1),添加一個鼠標點擊事件。   
    btn_part1.onclick=function () {

    //post的提交方式。
        $.ajax({
            type: "post",
            url: "/loanMoney",
            //用form表單將需要獲得的數據包起來,設置一個id userData
            data: $("#userData").serialize(),   // 通過表單的方式 (form表單中的input等標簽 設置name屬性,獲取用戶輸入的貸款數據)獲取用戶輸入的數據。    

            // data: {              // 通過設置id ,  .val 的方式來獲取數據。
            //     "money": $("#money").val(),
            //     "loanTime": $("#loanTime").val(),
            //     "repaymentPeriod": $("#repaymentPeriod").val(),
            //     "repayType": $("#repayType").val(),
            //     "cardNo": $("#cardNo").val()
            // },
//            contentType: "application/json",
            contentType :"application/x-www-form-urlencoded; charset=UTF-8",
            dataType: "json",
            success: function (data) {
                if (data.code == "2") {
                    alert(data.Msg);
                } else {
                    if (confirm("貸款申請成功,是否前往貸款結果頁面查看?")) {
                        window.location.href = "#";
                    }
                }
            }
        });
    }

 


免責聲明!

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



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