Why not use this form, because this high efficiency, and in the browser run the program when the bug, the page will not display error messages, improve the user's experience.
Well, let's take a look at it, cut a diagram of the database table first.
Then write the project by my directory structure
And look at the code.
conn.php
<?php
[Email Protected]_connect ("localhost","root","root")or Die ("MySQL connection failed!") ;
@mysql_select_db ("exercisephp",$conn)or Die ("DB connection Failed". Mysql_error ());
mysql_query (' Set NAMES UTF8 ')or Die ("CharSet set Error");
?>
Then index.php
<?php
Header"Content-tppe:text.html;charset:utf-8");
Include"Conn.php");
?>
<metahttp-equiv="Content-type"Content="Text/html; Charset=utf-8 "/>
<title>ajax Submitting Form Forms</title>
<scriptType="Text/javascript"Src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<linkhref="Css/index.css"Rel="Stylesheet"Type="Text/css"/>
<script>
$(function () {
$("#sub").Clickfunction () {
Logic to handle form validation and handing over to background processing
var username = $ ("#username"). Val ();
var pwd=$ ("#pwd"). Val ();
var email=$ ("#email"). Val ();
var datastring =' &username= ' + username +' &email= ' + email +' &pwd= ' + pwd;
alert (datastring); return false;
$.ajax ({
Type"POST",
Url:"Tijiao.php",
Data:datastring,
Successfunction () {
$(' #contact_form '). HTML ("<div id= ' message ' ></div>");
$(' #message '). HTML (".Append"<p></p>")
. Hide ()
. FadeIn (1500,function () {
$(' #message ').Append";
});
}
});
return False;
});
});
$("IMG").Clickfunction () {
$("#checkmark"). Hide ();
});
</script>
<body>
<divclass="Loginbar">
<divId="Message"></div>
<ul>
<li><span> User name:</span><span><inputType="Text"Name="Username"Id="Username"/></span></li>
<li><span> Password :</span><span><inputType="Text"Name="PWD"Id="PWD"/></span></li>
<li><span> Email :</span><span><inputType="Text"Name="Email"Id="Email"></span></li>
<li><span><inputType="Submit"Id="Sub"name=value=< Span style= "color: #a5c261;" > "submit" /></span><span><input type=< Span style= "color: #a5c261;" > "button" name= "clears" id=value=< Span style= "color: #a5c261;" > "reset" /></SPAN></LI>
</ul>
</DIV>
</body
</HTML>
Last tijiao.php
<?php
Error_reporting (0);
Header"Content-type:text/html;charset=utf-8");
Include"Conn.php");
$username =$_post[' Username '];
$pwd =$_post[' username '];
$email =$_post[' email '];
$sql ="INSERT into Ajaxcheck (username,pwd,email) VALUES ('$username', '$pwd', '$email ') ";
$query =mysql_query ($sql);
?>
Well, there's a CSS you can paste.
.loginbar{Border1px solid Red;Width500px;Height500px;Margin0 Autoz-index:1;
. loginbar li{ #message {margin-top: 100px; Width:300px; Height:300px; Z-index:9999; Position:absolute
These must be done, JS Ajax some browsers are already incompatible, so jquery Ajax submission Form form is Wang Daoha.
Asynchronously submits form data using AJAX (the most complete version in history)