一、在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"> </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 = "#"; } } } }); }