首页 > 代码库 > 记录一下jquery ajax的一个注意点
记录一下jquery ajax的一个注意点
今天，想要把自已的框架弄成，局部刷新的功能，肯定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=http://www.mamicode.com/"@Url.Action("GetVerificationCode", "Account")" alt="看不清？点击更换" class="form-control" onclick="this.src=http://www.mamicode.com/‘@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=http://www.mamicode.com/"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>
我只是想把服务器端的模型验证错误给显示出来而已，所以局部视图很简单命名为ValidatorSummary。代码如下
@Html.ValidationSummary()
服务器很简单返回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: "" } } });
然后问题来了，这个时候，怎么调试options.success=function(data){}函数老是不能被调用。服务端返回的局部视图是正确的，开始怀疑是json.form.js的或nice validator的bug.决定休息一会，再来看看源代码并在火狐中调试一下。一觉醒来后，继续思考这个问题，突然一个片断出现在脑海中，datetype：“json"服务器返回的是html/text。问题会不会是在这，打开电脑试了一下，god,果然是此处。做程序员就是这样，想了一大堆解决方法，问题往往是最容易和简单的地方。脑袋要学会转弯。好了，记下这个注间点，供以后备察。
记录一下jquery ajax的一个注意点
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。