ajaxForm插件juqery.form.js在提交表单前修改某个值的方法

[ 2017-11-02 15:56:51 | 作者: admin ]
字号: | |
在表单提交前,可以设置beforeSubmitbeforeSerialize

可以在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);
           }
    
}
[最后修改由 admin, 于 2017-11-02 15:59:04]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2458

这篇日志没有评论。

此日志不可发表评论。