Form form Submission Method

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.