知问前端——Ajax提交表单

本文，运用两大表单插件，完成数据表新增的工作。

一、创建数据库

创建一个数据库，名称为：zhiwen，表——user表，字段依次为：id、name、pass、email、sex、birthday、date。

本人是使用的Navicat for MySQL创建的user表， user表的结构如下：

知问前端——Ajax提交表单

所需的PHP文件：config.php、add.php。(本人没学过php，所以不过多解释)

config.php：

<?php
    header('Content-Type:text/html; charset=utf-8'); //防止乱码
    
    define('DB_HOST', 'localhost');
    define('DB_USER', 'root');
    define('DB_PWD', 'yezi');
    define('DB_NAME', 'zhiwen');
    
    $conn = @mysql_connect(DB_HOST, DB_USER, DB_PWD) or die('数据库链接失败：'.mysql_error());
    
    @mysql_select_db(DB_NAME) or die('数据库错误：'.mysql_error());
    
    @mysql_query('SET NAMES UTF8') or die('字符集错误：'.mysql_error());
?>

add.php：

<?php
    sleep(3); //睡眠3秒，以供测试
    require 'config.php';
    
    $query = "INSERT INTO user (name, pass, email, sex, birthday, date)
              VALUES ('{$_POST['user']}', sha1('{$_POST['pass']}'), '{$_POST['email']}', '{$_POST['sex']}', '{$_POST['birthday']}', NOW())";
    
    mysql_query($query) or die('新增失败！'.mysql_error());
    
    echo mysql_affected_rows(); //正确插入返回1，报错返回错误信息
    
    mysql_close();
?>

二、Loading制作

在提交表单的时候，用于网络速度问题，可能会出现不同时间延迟。所以，为了更好的用户体验，在提交等待过程中，设置loading是非常有必要的。

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知问前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="header">
        <div class="header_main">
            <h1>知问</h1>
            <div class="header_search">
                <input type="text" name="search" class="search" />
            </div>
            <div class="header_button">
                <button id="search_button">查询</button>
            </div>
            <div class="header_member">
                <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
            </div>
        </div>
    </div>
    
    <form id="reg" action="123.html" title="会员注册">
        <ol class="reg_error"></ol>
        <p>
            <label for="user">账号：</label>
            <input type="text" name="user" class="text" id="user"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="pass">密码：</label>
            <input type="password" name="pass" class="text" id="pass"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="text" name="email" class="text" id="email"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label>性别：</label>
            <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
            <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
        </p>
        <p>
            <label for="date">生日：</label>
            <input type="text" name="birthday" readonly="readonly" class="text" id="date"></input>
        </p>
    </form>
    <div id="loading">数据交互中...</div>
</body>
</html>

View Code