ajaxForm插件juqery.form.js在提交表单前修改某个值的方法
[ 2017-11-02 15:56:51 | 作者: admin ]
在表单提交前,可以设置beforeSubmit和beforeSerialize。
可以在beforeSerialize组装发送的表单值之前修改某些表单的值.
也可以在beforeSubmit可以做表单提交前的验证,不通过则可以阻止表单的提交
很多时候表单的数据是在动态的,不是确定的所以需要在表单提交的最后一刻来确定,比如用户发表文章的标签的数据。他可能添了删,删了添。
我想当然,认为在表单提交前做的操作应该是放在beforeSubmit吧,所以我就在beforeSubmit的函数里面做相关操作吧,但是发现发送的ajax请求里面一直没有数据。
换成beforeSerialize之后才有数据,这样才能成功的将数据发送到服务器端。
评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2458
可以在beforeSerialize组装发送的表单值之前修改某些表单的值.
也可以在beforeSubmit可以做表单提交前的验证,不通过则可以阻止表单的提交
很多时候表单的数据是在动态的,不是确定的所以需要在表单提交的最后一刻来确定,比如用户发表文章的标签的数据。他可能添了删,删了添。
我想当然,认为在表单提交前做的操作应该是放在beforeSubmit吧,所以我就在beforeSubmit的函数里面做相关操作吧,但是发现发送的ajax请求里面一直没有数据。
换成beforeSerialize之后才有数据,这样才能成功的将数据发送到服务器端。
beforeSerialize: modifySubmitData, //提交到Action时,可以自己对某些值进行处理。
$(function(){
var options={
//target : '#output', // 把服务器返回的内容放入id为output的元素中
beforeSubmit : showRequest, // 提交前的回调函数,做表单校验用
beforeSerialize: modifySubmitData, //提交到Action时,可以自己对某些值进行处理。
success : showResponse, // 提交后的回调函数
//contentType: "application/x-www-form-urlencoded;charset=UTF-8",
url :'${pageContext.request.contextPath}/jqueryFormPlugin/getForm', //默认是form的action,如果申明,则会覆盖
type : "POST", // 默认值是form的method("GET" or "POST"),如果声明,则会覆盖
dataType : "json" // html(默认)、xml、script、json接受服务器端返回的类型
// clearForm : true, // 成功提交后,清除所有表单元素的值
// resetForm : true, // 成功提交后,重置所有表单元素的值
// timeout : 3000 // 限制请求的时间,当请求大于3秒后,跳出请求
}
// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
$("#search_btn1").click(function () {
$("#searchForm1").ajaxSubmit(options);
});
});
function showRequest(formData, jqForm, options){
//仅用于校验,即使改变了表单的某些值,在前台会有显示,但不改变提交到Action/Controller的值。
// formData: 数组对象,提交表单时,form插件会以ajax方式自动提交这些数据,格式如[{name:user,value:val},{name:pwd,value:pwd}]
// jqForm: jQuery对象,封装了表单的元素
// options: options对象
//var queryString=$.param(formData); // name=1&address=2
//formData: $('#searchForm1').serialize();
//var queryCondition = $('#searchForm1').serialize();
var t1 = jqForm;
var t2 = formData;
var t3 = options;
var queryCondition =$.param(formData);
var formElement=jqForm[0]; // 将jqForm转换为DOM对象
var name=formElement.name.value; // 访问jqForm的DOM元素
$("#name").val("lele李姓名showRequest");
$("#comment").val("呵呵ll123");
return true; // 只要不返回false,表单都会提交,在这里可以对表单元素进行验证
}
function modifySubmitData(){
//组装发送的表单值之前修改某些字段的值。在Action/Controller中真正接收的值。
$("#id").val("lele李");
$("#name").val("lele李姓名modifySubmitData");
$("#comment").val("呵呵ll123444");
}
function showResponse(responseText,statusText){
var data = responseText;
if (data.success == true) {
var retlist = data.result;
//alert(retlist.length);
}else{
alert("error:"+data.responseText);
}
}
var options={
//target : '#output', // 把服务器返回的内容放入id为output的元素中
beforeSubmit : showRequest, // 提交前的回调函数,做表单校验用
beforeSerialize: modifySubmitData, //提交到Action时,可以自己对某些值进行处理。
success : showResponse, // 提交后的回调函数
//contentType: "application/x-www-form-urlencoded;charset=UTF-8",
url :'${pageContext.request.contextPath}/jqueryFormPlugin/getForm', //默认是form的action,如果申明,则会覆盖
type : "POST", // 默认值是form的method("GET" or "POST"),如果声明,则会覆盖
dataType : "json" // html(默认)、xml、script、json接受服务器端返回的类型
// clearForm : true, // 成功提交后,清除所有表单元素的值
// resetForm : true, // 成功提交后,重置所有表单元素的值
// timeout : 3000 // 限制请求的时间,当请求大于3秒后,跳出请求
}
// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
$("#search_btn1").click(function () {
$("#searchForm1").ajaxSubmit(options);
});
});
function showRequest(formData, jqForm, options){
//仅用于校验,即使改变了表单的某些值,在前台会有显示,但不改变提交到Action/Controller的值。
// formData: 数组对象,提交表单时,form插件会以ajax方式自动提交这些数据,格式如[{name:user,value:val},{name:pwd,value:pwd}]
// jqForm: jQuery对象,封装了表单的元素
// options: options对象
//var queryString=$.param(formData); // name=1&address=2
//formData: $('#searchForm1').serialize();
//var queryCondition = $('#searchForm1').serialize();
var t1 = jqForm;
var t2 = formData;
var t3 = options;
var queryCondition =$.param(formData);
var formElement=jqForm[0]; // 将jqForm转换为DOM对象
var name=formElement.name.value; // 访问jqForm的DOM元素
$("#name").val("lele李姓名showRequest");
$("#comment").val("呵呵ll123");
return true; // 只要不返回false,表单都会提交,在这里可以对表单元素进行验证
}
function modifySubmitData(){
//组装发送的表单值之前修改某些字段的值。在Action/Controller中真正接收的值。
$("#id").val("lele李");
$("#name").val("lele李姓名modifySubmitData");
$("#comment").val("呵呵ll123444");
}
function showResponse(responseText,statusText){
var data = responseText;
if (data.success == true) {
var retlist = data.result;
//alert(retlist.length);
}else{
alert("error:"+data.responseText);
}
}
[最后修改由 admin, 于 2017-11-02 15:59:04]

这篇日志没有评论。
此日志不可发表评论。