1.通过<form action="url"><input type="submit"></form>按钮方式提交
这种方式是最传统的提交表单的方式,就是把所有的表单的值传到url界面。用于本页面传本页面比较多。
2.通过<input type="button" method="post/get" onclick="onSubmit()">
这里是通过onclick触发js事件,然后我们可以在function onSubmit(){}写一些传输方式,比较典型的就是ajax传输:
1 var j$ = jQuery.noConflict();//注册jQuery 2 function onSubmit(){ 3 j$.ajax({ 4 type:"get", 5 url:"fix_project_contrast_do.jsp", 6 data:{ 7 fixitem_id : j$("#fixitem_id").val(), 8 check_man : j$("#check_man").val() 9 }, 10 success:function(ret){ 11 if(ret == 1) { 12 alert("提交审核成功!"); 13 }else{ 14 alert(ret); 15 16 } 17 window.returnValue=true; 18 window.close(); 19 } 20 }); 21 }
然后我们可以在fix_project_contrast_do.jsp处理
1 <%@ page contentType="text/html; charset=GBK" import="相应的类路径" %> 2 3 <% 4 try{ 5 6 Integer fixitem_id = Utility.trimNull(request.getParameter("fixitem_id")), new Integer(0)); 7 Integer check_man = Utility.parseInt(Utility.trimNull(request.getParameter("check_man")), new Integer(0)); 8 //处理逻辑省略 9 out.clear(); 10 response.getWriter().write("1");//response相应值 11 }catch(Exception e){ 12 out.clear(); 13 response.getWriter().write(e.getMessage()); 14 } 15 16 %>
这种ajax异步传输用于修改后保存然后刷新页面比较多。
扩展:
如果我上传的页面包含<input type="file">的时候,需要修改在我们form标签
<form name="form_name" name="form_loan_update" enctype="multipart/form-data" method="post"> 我们就要通过下面代码提交表单了,fileElementId:'form_name'是提交form_name整个表单
jQuery.ajaxFileUpload({ async:false, url:'fix_project_contrast_do.jsp', secureuri:false, fileElementId:'form_name', dataType: 'json', beforeSend:function(){ }, complete:function(){ }, success: function (data, status){ //表单参数 //次顺序 alert("保存成功"); window.location.reload();//刷新 }, error: function (data, status, e){ var result = Ext.MessageBox.show({ title: '事务表单异常', msg: data.responseText, 520, closable:false }); } }); }
然后在fix_project_contrast_do.jsp接收数据的数据需要
Integer fixitem_id = Utility.trimNull(file.getParameter("fixitem_id")), new Integer(0));
3.通过<form name="test" method="post" action="#"><input type="button" onclick="document.test.submit()"></form>
使用java代码实现相应的业务代码
1 <% 2 if (request.getMethod().equals("POST")) { 3 /**逻辑代码 4 *1.获取参数 5 *2.处理参数,实现业务逻辑 6 *3.设置标识,用于通过js跳转页面或刷新页面 7 */ 8 bSuccess = true; 9 } 10 %> 11 <%if (bSuccess) {%> 12 alert("保存成功!"); 13 var url = "对应的url参数"; 14 location = url; 15 <%}%>
4.异步传输,实时监控表单数据
1 <script type="text/javascript"> 2 var req=false;//异步请求提交对象 3 //1、初始化异步请求提交对象 4 function init(){ 5 if(window.ActiveXObject){//IE 6 req=new ActiveXObject("Microsoft.XMLHTTP"); 7 }else{//firefox 8 req=new XMLHttpRequest(); 9 } 10 } 11 //发送请求 12 function sendReq(){ 13 init(); 14 var sd=document.getElementById("stid").value; 15 //2、指定处理返回值的函数 16 req.onreadystatechange=process; 17 //3、打开到资源的连接 18 req.open("get","url",true); 19 //4、发送请求 20 req.send(null); 21 } 22 //5、处理返回值 23 function process(){ 24 if(req.readyState==4){ 25 if(req.status==200){ 26 //获取返回值 27 var v=req.responseText; 28 var d=document.getElementById("divsid"); 29 d.innerHTML=v; 30 } 31 } 32 } 33 </script>
5.$.post()提交表单,$.ajax的封装,原理和$.ajax一样。需要导入.jquery.js包
1 js$.post("problem_invest_use_money_getCustInfo.jsp", {"fixitem_id" : fixitem_id}, function(data){ 2 if(data != 0){ 3 var params = data.split("$"); 4 if(params[0] == 1){ 5 document.getElementById("jkr_cust_id").value = params[1]; 6 document.getElementById("jkr_cust_name").value = params[2]; 7 }else{ 8 alert(data) 9 } 10 } 11 });
其中回调函数data就是通过java代码:response.getWriter().write(returnString);返回
6.showModalDialog返回获取放回字符串
1 function btnChoose(){ 2 if(!sl_checkChoice(document.theform.fixitem_id, "项目ID")) return false; 3 if(!sl_checkChoice(document.theform.jj_contract_sub_bh, "合同编号")) return false; 4 var fixitem_id = document.getElementById("fixitem_id").value; 5 var jj_contract_bh = document.getElementById("jj_contract_sub_bh").value; 6 var v = showModalDialog('/efifs/zhongjiantou/repayment_principal_plan_choose.jsp?fixitem_id='+fixitem_id+'&jj_contract_bh='+jj_contract_bh,'','dialogWidth=1000px;dialogHeight=800px;status=no;help=0'); 7 var params = v.split("$"); 8 document.getElementById("money").value = params[0]; 9 document.getElementById("lx_money").value = params[1]; 10 document.getElementById("plan_id_list").value = params[2]; 11 }
其中 v = window.returnValue = returnString;