Home > Others

jquery does not refresh the example of the page submission form

Source: Internet
Author: User
Tags require
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Instance

To load a piece of text with 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


Front Desk file:

The code is as follows Copy Code

<script type= "Text/javascript" src= "Js/jque Second World Collation release 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= "submitted"/>
<!--There is no need for form here, because call a function at commit
<script type= "Text/javascript" >
$ (document). Ready (function () {//dom onload event handler
$ ("#button"). Click (function () {//Functions when button buttons are clicked
PostData (); Execute PostData function when button is clicked
});
});

function PostData () {//Submit data functions
$.ajax ({//Call jquery Ajax method
Type: "POST",//Setting the format of the Ajax method submission data
URL: "ok.php",//Submit data to ok.php
Data: "Writer=" +$ ("#writer"). Val () + "&pass=" +$ ("#pass"). Val (),//input box writer value as data submitted
Success:function (msg) {//After a successful callback, the MSG variable is the content of the ok.php output.
Alert ("Data submitted successfully"); If necessary, you can display the value of the MSG variable in a DIV element
}
});
}
</script>

Background files:

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 '];

?>

Implementation of no-flush commit with IFRAME method

Use IFRAME to do no refresh upload
To implement file uploads, the form must set several properties:
1.action: Set to the address of the page to process the data;
2.method: Set to "POST";
3.enctype/encoding: Must be set to "Multipart/form-data", here should be noted that in IE with JS to modify the form of the Enctype property is no effect, can only modify the encoding;
IFRAME implementation of the principle of no refresh upload: Using the target attribute of form, the data submitted to a (usually hidden) iframe on the page. Intuitive point is that the "refresh" left to the IFRAME.
In fact, the principle of the general use of an IFRAME without refreshing the submission form is the same, but here is replaced by a file.
The key here is to set the target of the form to the name of the IFRAME
Specific examples of IFRAME:

The code is as follows Copy Code
<body>
<iframe src= "a.htm" frameborder= "0" scrolling= "yes" height= "100px" width= "100px" ></iframe>
</body>

This is displayed on the page as a frame embedded in the page, which has a size of 100 pixels, a width of 100 pixels, and a scroll bar without a border.

The code is as follows Copy Code
<body>
<iframe name= "res" style= "Display:none" src= "a.htm" frameborder= "0" scrolling= "yes" height= "100px" width= "100px" ></iframe>
<form target= "res" >
</form>

By submitting data with an implied IFRAME, you can avoid page refreshes.
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
wordpress the field refresh page php after submit form refresh page after form submit php form validation example in jquery reload page after form submit jquery file submission form jquery accordion form with validation example

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More