使用ajax异步提交表单数据（史上最完整的版本）

额为啥用这个不用form呢，因为这个效率高，而且在浏览器中运行程序的时候如果出现bug的话，页面不会显示显示错误信息，提高了用户的体验度。

那么，就来看看把，先给数据库表截个图哈

然后写项目被我的目录结构

使用ajax异步提交表单数据（史上最完整的版本）

然后看代码呗

conn.php

 <?php

$conn=@mysql_connect("localhost","root","root")or die("mysql连接失败!");
@mysql_select_db("exercisephp",$conn)or die("db连接失败".mysql_error());
mysql_query('SET NAMES UTF8')or die("字符集设置错误");
?>

然后index.php

<?php
   header("Content-tppe:text.html;charset:utf-8");
   include("conn.php");
?>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ajax提交form表单</title>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <script>

        $(function() {
            $("#sub").click(function() {
        // 处理表单验证和交给后台处理的逻辑
                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,
                    success: function() {
                        $('#contact_form').html("<div id='message'></div>");
                        $('#message').html("<h2></h2>")
                            .append("<p></p>")
                            .hide()
                            .fadeIn(1500, function() {
                                $('#message').append("<img id='checkmark' src='image/pic2.jpg' />");
                            });
                    }
                });
                return false;
            });
        });

        $("img").click(function(){

            $("#checkmark").hide();

        });
    </script>
</head>
<body>
<div class="loginbar">
    <div id="message"></div>
<ul>
    <li><span>用户名：</span><span><input type="text" name="username" id="username"/></span></li>
    <li><span>密码&nbsp;&nbsp;:</span><span><input type="text" name="pwd" id="pwd"/></span></li>
    <li><span>邮箱&nbsp;&nbsp;:</span><span><input type="text" name="email" id="email"></span></li>
    <li><span><input type="submit" id="sub" name="sub" value="提交"/></span><span><input type="button" name="clears" id="clears" value="重置"/></span></li>
</ul>
</div>

</body>
</html>

最后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);

?>

额 还有个css  你们也可以粘贴上

.loginbar{border:1px solid red;width:500px;height:500px;margin:0 auto;z-index:1;}
.loginbar li{list-style:none;}
#message{margin-top:100px;width:300px;height:300px;z-index:9999;position: absolute;}

就这些把  必须好使，js ajax 有些浏览器 已经不兼容了 所以jquery ajax 提交form表单才是王道哈。