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

桃扇骨 2022-08-19 01:45 363阅读 0赞

在表单提交前，可以设置beforeSubmit和beforeSerialize。

可以在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);
         } 
    
    }