记录一下jquery ajax的一个注意点

浏览数：40 / 时间：2015年06月09日

今天，想要把自已的框架弄成，局部刷新的功能，肯定ajax必用，有两种ajax可用，一个是mvc自带的UnobtrusiveJavaScript，第二个是jquery原生ajax，原生ajax灵活决定用原生ajax，要实现局部刷新可以用可以把要刷新的数据从服务器端返回，然后在客户端拼字符串，最后append要呈现的html元素中。再有一个方法就是用mvc的局部视图，服务器端返回局部视图，客户端直接一句话$(选择器)。append(data)完事。到此思路通畅，开始做。表单是这样的如下。

<form id="login">
                                       @Html.AntiForgeryToken()
                                        <div id="validationSummary"></div>
                                        <fieldset>

                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input class="form-control" name="UserName" type="text" placeholder="用户名">


                                                    <i class="icon-user"></i>
                                                </span>
                                            </label>
                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input class="form-control" name="Password" type="password" placeholder="密码">
                                                    <i class="icon-lock"></i>
                                                </span>
                                            </label>
                                            <label class="block clearfix valtype">
                                                <span class="block pull-left" style="width:191px;">
                                                    <input class="form-control" name="VerificationCode" type="text" placeholder="验证码">


                                                </span>
                                                <span class="block pull-left" style="width:100px;">
                                                    <img id="Verify_code" align="bottom" src="@Url.Action("GetVerificationCode", "Account")" alt="看不清？点击更换" class="form-control" onclick="this.src=‘@Url.Action("GetVerificationCode", "Account")?time=‘ + (new Date()).getTime();" width="80" height="24" />

                                                </span>
                                            </label>

                                            <div class="space"></div>
                                            <div class="clearfix">
                                                <label class="inline">

                                                    <input type="checkbox" name="IsRememberLogin" value="true" class="ace">
                                                    <span class="lbl"> 记住</span>
                                                </label>
                                                <button class="width-35 pull-right btn btn-sm btn-primary" type="submit">
                                                    <i class="icon-key"></i>
                                                    登录
                                                </button>
                                            </div>
                                            <div class="space-4"></div>
                                        </fieldset>
                                    </form>

View Code

我只是想把服务器端的模型验证错误给显示出来而已，所以局部视图很简单命名为ValidatorSummary。代码如下

@Html.ValidationSummary()

View Code

服务器很简单返回paritalView（“ValidatorSummary”）即可。
客户端我用的是json.form.js 和nice validator 代码如下

 var options = {

            datatype:"json",
            clearForm: true,
            type: ‘POST‘,
            
            success: function (data) {

                //alert(data.AppendData);
                if (data.AppendData != null)
                    window.location.href = data.AppendData;
                else
                    alert(data.Message);



            }
        };

        formValidator(options);


        function formValidator(options) {
           
            //此处设为2没经过验证也可提交服务端。
            $.validator.config({
                debug: 0
            })
            // 获取url查询参数
            var queryString = location.search;
            // alert(queryString);
            $("#login").validator({
                theme: "simple_bottom",
                valid: function (form) {
                    //$.post("/Account/Index/Login", $(form).serialize(), function (data) { $("#summary").empty().append(data); })
                    options.url = "/Account/Index/Login" + queryString;
                    options.success = function (data) {

                        $("#Verify_code").attr("src", ‘@Url.Action("GetVerificationCode", "Account")?time=‘ + (new Date()).getTime());
                        //alert(data.AppendData);
                        //局部刷新验证错误
                        $("#validationSummary").empty().append(data);
                        if (data.AppendData != null)
                            window.location.href = data.AppendData;
                        else
                            alert(data.Message);
                    }
                                      
                    $(form).ajaxSubmit(options);

                },
                fields: {
                    UserName:
                        {
                            rule: "required; username",

                            tip: "请输入3-12位数字、字母、下划线"

                            //target: ""
                        }

                }

            });

View Code

然后问题来了，这个时候，怎么调试options.success=function(data){}函数老是不能被调用。服务端返回的局部视图是正确的，开始怀疑是json.form.js的或nice validator的bug.决定休息一会，再来看看源代码并在火狐中调试一下。一觉醒来后，继续思考这个问题，突然一个片断出现在脑海中，datetype：“json"服务器返回的是html/text。问题会不会是在这，打开电脑试了一下，god,果然是此处。做程序员就是这样，想了一大堆解决方法，问题往往是最容易和简单的地方。脑袋要学会转弯。好了，记下这个注间点，供以后备察。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

记录一下jquery ajax的一个注意点