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;