If you want to use jquery to submit a form without refreshing a new page, you can use ajax or iframe to implement it. Next I will introduce you to using jquery ajax and then use the iframe method. If you need it, you can refer to it.
Instance
Load a piece of text using AJAX:
JQuery code:
The Code is as follows: |
Copy code |
$ (Document). ready (function (){ $ ("# B01"). click (function (){ Htmlobj = $. ajax ({url: "/jquery/test1.txt", async: false }); $ ("# MyDiv" ).html (htmlobj. responseText ); }); }); |
HTML code:
The Code is as follows: |
Copy code |
<Div id = "myDiv"> <Button id = "b01" type = "button"> Change Content </button> |
Simple ajax User Registration
Foreground file:
The Code is as follows: |
Copy code |
<Script type = "text/javascript" src = "js/jque Second-World Organization and release of ry. js" mce_src = "js/jquery. js"> </script> <Input name = "writer" id = "writer" type = "text" value = ""/> <Input name = "pass" id = "pass" type = "password" value = ""/> <Input type = "submit" name = "button" id = "button" value = "submit"/> <! -- Form is not required here, because a function is called during submission. <Script type = "text/javascript"> $ (Document). ready (function () {// onload event handler function of DOM $ ("# Button"). click (function () {// processing function when a button is clicked Postdata (); // execute the postdata function when the button is clicked. }); }); Function postdata () {// submit data function $. Ajax ({// call jquery's ajax Method Type: "POST", // set the ajax method to submit data Url: "OK. php", // submit the data to OK. php Data: "writer =" + $ ("# writer "). val () + "& pass =" + $ ("# pass "). val (), // input the value in the writer box as the submitted data Success: function (msg) {// callback after successful submission. The msg variable is output by OK. php. Alert ("data submitted successfully"); // if necessary, you can display the msg variable value to a DIV element. } }); } </Script> |
Background File:
The Code is as follows: |
Copy code |
<? Php Require "config. php "; Require "conn. php "; $ Writer =$ _ POST ['writer']; $ Pass = $ _ POST ['pass']; Mysql_query ("insert into user values (0, '$ writer',' $ pass')", $ db ); // Echo $ _ POST ['writer']; ?> |
Use the iframe method to implement refreshing commit
Use iframe for refreshing upload
To upload files, you must set the following attributes for form:
1. action: set as the page address for data processing;
2. method: set to "post ";
3. enctype/encoding: It must be set to "multipart/form-data". Note that modifying the enctype attribute of form with js in ie is ineffective and only encoding can be modified;
Iframe: uses the target attribute of form to submit data to one (usually hidden) iframe on the page. From the point of view, "refresh" is left to iframe.
In fact, the principle is the same as the general use of iframe to implement a non-refreshing new submission form, but here it is changed to a file.
The key here is to set the target of form to the name of iframe.
Iframe example:
The Code is as follows: |
Copy code |
<Html> <Body> <Iframe src = "a.htm" frameborder = "0" scrolling = "yes" height = "100px" width = "100px"> </iframe> </Body> </Html>
|
This is displayed as a frame embedded on the page. The frame size is 100 pixels long, 100 pixels wide, and has a scroll bar without borders.
The Code is as follows: |
Copy code |
<Html> <Body> <Iframe name = "res" style = "display: none; "src =" a.htm "frameborder =" 0 "scrolling =" yes "height =" 100px "width =" 100px "> </iframe> <Form target = "res"> </Form>
|
Using an implicit iframe to submit data can avoid page refreshing.
</Body>
</Html>