Jquery.Form 异步提交表单的简单实例_jquery

企鹅博客
19050
文章
0
评论
2019年12月30日22:15:17 评论 32 views 2994字阅读9分58秒

http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#

1. 在你的页面里写一个表单。一个普通的表单,不需要任何特殊的标记:

复制代码 代码如下:


Name:


Password:


在没有Jquery.Form组件的时候,提交表单,页面会进入阻塞模式,等待服务器端的响应。

2. 引入jQuery和Form Plugin Javascript脚本文件并且添加几句简单的代码让页面在DOM加载完成后初始化表单:



加上jquery.form组件后,提交表单时,页面不会再同步提交,而是由js做异步提交,因此提交后页面不会有刷新。

3. 加入能够与服务器端进行交互的回调函数。

复制代码 代码如下:

$(document).ready(function () {

//options是一个ajaxForm的配置对象。?

var options = {

//target: '#output1', // target element(s) to be updated with server response

//beforeSubmit: showRequest, // pre-submit callback


success: callBackFunc // post-submit callback

// other available options:

//url: url // override for form's 'action' attribute

//type: type // 'get' or 'post', override for form's 'method' attribute

//dataType: null // 'xml', 'script', or 'json' (expected server response type)

//clearForm: true // clear all form fields after successful submit

//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:

//timeout: 3000

};

// bind form using 'ajaxForm'

$('#myForm').ajaxForm(options);

});

// responseText是服务端的响应值。statusText是页面

// 提交状态值,success表示成功。
function callBackFunc(responseText, statusText) {
if (statusText == 'success') {
alert(responseText);
}

else{

alert(“服务端错误!”);

}
}

如果返回的是json数据则回调函数可以这么写
function resultFunction(responseText,statusText) {
if (statusText == 'success') {
if (responseText.code == 1) {
alert(responseText.message);
}
else {
alert('error occurs!');
}
}
else {
alert('服务器错误!');
}
}

服务端的代码如下:

复制代码 代码如下:

[HttpPost]

public ActionResult AjaxForm(FormCollection form)

{

string message = "Name:" + form["username"] + " PWD: "+form["password"] ;

//return Content(message);

return Json(new { code = 1, message = message });

}

4. 加入提交前的数据校验函数

为options对象添加 beforeSubmit属性

复制代码 代码如下:

var options = {

//target: '#output1', // target element(s) to be updated with server response


beforeSubmit: checkData, // pre-submit callback
success: callBackFunc // post-submit callback

// other available options:

//url: url // override for form's 'action' attribute

//type: type // 'get' or 'post', override for form's 'method' attribute

//dataType: null // 'xml', 'script', or 'json' (expected server response type)

//clearForm: true // clear all form fields after successful submit

//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:

//timeout: 3000

};

// pre-submit callback

function checkData(formData, jqForm, options) {

// formData is an array; here we use $.param to convert it to a string to display it

// but the form plugin does this for you automatically when it submits the data

//var queryString = $.param(formData);

// jqForm is a jQuery object encapsulating the form element. To access the

// DOM element for the form do this:

var formElement = jqForm[0];

//alert('About to submit: \n\n' + queryString);

// here we could return false to prevent the form from being submitted;

// returning anything other than false will allow the form submit to continue

//return true;

if ($(formElement).find("#username").val() == "") {

alert("please enter username!");

return false;

} else {

return true;

}

}

验证用户名是否为空,是则提示输入,并取消表单提交。

继续阅读
  • 版权声明: 发表于 2019年12月30日22:15:17
  • 转载注明:https://www.qieseo.com/419080.html
ajax与302响应代码测试_JavaScript js教程

ajax与302响应代码测试_JavaScript

在ajax请求中,如果服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们来一起看看实际...
关于JS+HTML5的10篇文章推荐 js教程

关于JS+HTML5的10篇文章推荐

这篇文章主要介绍了JS+HTML5 FileReader对象用法,结合具体实例形式分析了FileReader对象的常用方法及简单使用技巧,需要的朋友可以参考下本文实例讲述了JS+HTML5 FileR...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: