• 在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 = "#";
                        }
                    }
                }
            });
        }
  • 相关阅读:
    log4j(四)——如何控制不同风格的日志信息的输出?
    log4j(三)——如何控制不同级别的日志信息的输出?
    log4j(二)——如何控制日志信息的输出?
    【完全开源】知乎日报UWP版:增加Live磁贴、Badge、以及Toast通知
    【完全开源】知乎日报UWP版:项目结构说明、关键源代码解释
    【完全开源】知乎日报UWP版(下篇):商店APP、github源码、功能说明。Windows APP 良心出品。
    UWP开发:APP之间的数据交互(以微信为例)
    【完全开源】知乎日报UWP版(上篇):界面设计、官方API分析
    【完全开源】博客园客户端UWP版 带源码、带APP(下篇)
    UWP开发之控件:用WebView做聊天框
  • 原文地址:https://www.cnblogs.com/ZXF6/p/11739738.html
Copyright © 2020-2023  润新知