No Refresh page Submission Form
Form can be implemented without Refresh page submission, without page jump, as below, through a hidden iframe implementation, the form of the form of the target set to the name of the IFRAME,
Form submission Target bit current page iframe does not refresh page
<form action= "/url.do" method= "post" target= "Targetifr" ><input type= "text" name= "name"/></form> <iframe name= "Targetifr" style= "Display:none" ></iframe>
Submitted via Type=submit
General form submission through TYPE=SUBMIT implementation, input type= "Submit", the browser is displayed as button buttons, by clicking this button to submit the form data jump to/url.do
<form action= "/url.do" method= "POST" > <input type= "text" name= "name"/> <input type= "Submit" Value= "Submit" ></form>
JS Submit Form Form
JS event to submit the order, through the button, link and other trigger events, JS call the Submit () method to submit the form data, jquery through the Submit () method
<form id= "form" action= "/url.do" method= "POST" > <input type= "text" name= "name"/></form>
Js:document.getElementById ("form"). Submit ();
jquery: $ ("#form"). Submit ();
Ajax submits form data asynchronously
By using the Ajax asynchronous way, the values of all input, select components in the form are obtained by JS, and the values are composed in JSON format, which interacts with the server side asynchronously.
Typically, the form data is routed to the server side, the server processes the data and returns the result information, etc.
<form id= "form" method= "POST" > <input type= "text" name= "name" id= "name"/></form> var params = {"Name", $ ("#name"). Val ()} $.ajax ({ type: "POST", URL: "/url.do", data:params, dataType: " JSON ", success:function (respmsg) { } });
Page no jump
If the file is submitted through the Form form submission Request Server, then the current page does not jump, the server returns void, through response to write the file data,
The download file is displayed on the page.
<form action= "/url.do" method= "POST" > <input type= "text" name= "name"/> <input type= "Submit" Value= "Submit" ></form> @RequestMapping (value = "/url") public void Exportfile (HttpServletRequest req, HttpServletResponse response, String Rptid) throws Exception { outputstream out = null; try { String rptname = "file"; String fileName = new String ((Rptname + excelable.getfilesuffix ()). GetBytes ("GBK"), "8859_1"); Response.reset (); Response.setcontenttype ("Application/octec-stream"); Response.setheader ("Content-disposition", "attachment; Filename= "+ fileName); out = Response.getoutputstream (); Excelable.exportfile (out); } catch (Exception e) { logger.error (e); } finally { if (out! = null) { out.close ();} } }
Form form upload File
Uploading a file using the form form requires adding the enctype= "Multipart/form-data" attribute to the form, and in addition to changing the form's submission method to post,
Method= "POST" below, the type of input type needs to be set to file
<form action= "/url.do" enctype= "Multipart/form-data" method= "POST" > <input type= "file" name= "name"/ > <input type= "Submit" value= "Submission" > </form>
Form form Submission Method