1.经过<form action="url"><input type="submit"></form>按钮方式提交javascript
这种方式是最传统的提交表单的方式,就是把全部的表单的值传到url界面。用于本页面传本页面比较多。html
2.经过<input type="button" method="post/get" onclick="onSubmit()">java
这里是经过onclick触发js事件,而后咱们能够在function onSubmit(){}写一些传输方式,比较典型的就是ajax传输:jquery
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处理ajax
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异步传输用于修改后保存而后刷新页面比较多。json
扩展:
异步
若是我上传的页面包含<input type="file">的时候,须要修改在咱们form标签jsp
<form name="form_name" name="form_loan_update" enctype="multipart/form-data" method="post"> 咱们就要经过下面代码提交表单了,fileElementId:'form_name'是提交form_name整个表单async
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, width: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 //一、初始化异步请求提交对象 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 //二、指定处理返回值的函数 16 req.onreadystatechange=process; 17 //三、打开到资源的链接 18 req.open("get","url",true); 19 //四、发送请求 20 req.send(null); 21 } 22 //五、处理返回值 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;