知問前端——Ajax提交表單

時間 2019-12-11

標籤前端 ajax 提交表單欄目 Ajax 简体版

原文原文鏈接

本文，運用兩大表單插件，完成數據表新增的工做。javascript

1、建立數據庫php

建立一個數據庫，名稱爲：zhiwen，表——user表，字段依次爲：id、name、pass、email、sex、birthday、date。css

本人是使用的Navicat for MySQL建立的user表， user表的結構以下：html

所需的PHP文件：config.php、add.php。(本人沒學過php，因此不過多解釋)前端

config.php：java

<?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：mysql

<?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();
?>

2、Loading製做jquery

在提交表單的時候，用於網絡速度問題，可能會出現不一樣時間延遲。因此，爲了更好的用戶體驗，在提交等待過程當中，設置loading是很是有必要的。ajax

index.html：sql

<!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

採用對話框式：

$("#loading").dialog({
    autoOpen:false,
    modal:true,
    closeOnEscape:false, //按下Esc無效
    resizable:false,
    draggable:false,
    width:180,
    //height:80
    height:50  //height爲什麼從80變爲50，後面會講解到
}).parent().find(".ui-widget-header").hide(); //去掉header頭

css增長部分：

#loading {
    background: url(img/loading.gif) no-repeat 20px center;
    line-height: 25px;
    font-size: 14px;
    font-weight: bold;
    text-indent: 40px; /* 首行縮進40像素  */
    color: #666;
}

因此style.css爲：

body {
    margin: 40px 0 0 0;
    padding: 0;
    font-size: 12px;
    font-family: 宋體;
    background: #fff;
}
/* 更改jQuery UI主題的對話框header的背景 */
.ui-widget-header {
    background: url(img/ui_header_bg.png);
}
/* 按鈕正常狀態的背景 */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background:url(img/ui_header_bg.png);
}
/* 按鈕點擊狀態的背景 */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background:url(img/ui_white.png);
}
/* 工具提示的文本顏色 */
.ui-tooltip {
    color: #666;
}
/* 郵箱自動補全的懸停背景色 */
.ui-menu .ui-state-focus {
    background:url(img/ui_header_bg.png);
}
.ui-menu {
    color: #666;
}
/* 日曆UI的今天單元格樣式 */
.ui-datepicker-today .ui-state-highlight {
    border:1px solid #eee;
    color:#f60;
}
/* 日曆UI的選定單元格樣式 */
.ui-datepicker-current-day .ui-state-active {
    border:1px solid #eee;
    color:#06f;
}
.a {
    font-size: 30px;
}
#header {
    width: 100%;
    height: 40px;
    background: url(img/header_bg.png);
    position: absolute;
    top:0;
}
#header .header_main {
    width: 800px;
    height: 40px;
    margin: 0 auto;
}
#header .header_main h1 {
    font-size: 20px;
    margin: 0;
    padding: 0;
    color: #666;
    line-height: 40px;
    float: left;
    padding: 0 10px;
}
#header .header_search {
    padding: 6px 0 0 0;
    float: left;
}
#header .header_search .search {
    width: 300px;
    height: 24px;
    border: 1px solid #ccc;
    background: #fff;
    color: #666;
    font-size: 14px;
    text-indent: 5px;
}
#header .header_button {
    padding: 5px;
    float: left;
}
#header .header_member {
    float: right;
    line-height: 40px;
    color: #555;
    font-size: 14px;
}
#header .header_member a {
    text-decoration: none;
    font-size: 14px;
    color: #555;
}
#reg {
    padding: 15px 0 0 15px;
}
#reg p {
    margin: 10px 0;
    padding: 0;
}
#reg p label {
    font-size: 14px;
    color: #666;
}
#reg .star {
    font-size: 14px;
    color: maroon;  /* 紅色太耀眼，換成棕色 */
}
#reg .succ {
    display: inline-block; /* 將<span>元素(內聯)轉變成內聯塊，並且<span>裏還要有數據，插入的圖片才能顯示出來 */
    width: 28px;
    background: url(img/reg_succ.png) no-repeat;
}
#reg ol {
    margin:0;
    padding: 0 0 0 20px;
    color: maroon;
}
#reg ol li {
    height: 20px;
}
#reg .text {
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-indent: 5px;
    font-size: 13px;
    color: #666;
}

#loading {
    background: url(img/loading.gif) no-repeat 20px center;
    line-height: 25px;
    font-size: 14px;
    font-weight: bold;
    text-indent: 40px; /* 首行縮進40像素  */
    color: #666;
}

View Code

3、Ajax提交

最後，咱們須要採用jquery.form.js插件對數據進行提交，並且在其餘部分也須要作一些修改。

//輸入驗證成功以後，進行提交
submitHandler:function(form) {
    //alert("驗證成功，準備提交中！");
    $(form).ajaxSubmit({
        url:"add.php",
        type:"post",
        beforeSubmit:function(formData,jqForm,options) {
            //提交以前，將「數據正在交互中...」對話框打開
            //打開以後，高度又默認增長了30，因此在初始化dialog時，height應-30，變爲50
            $("#loading").dialog("open");

            //alert($("#reg").dialog("widget").html());
            //alert($("#reg").dialog("widget").find("button").eq(0).html()); //<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span>
            //alert($("#reg").dialog("widget").find("button").eq(1).html()); //<span class="ui-button-text">提交</span>
            $("#reg").dialog("widget").find("button").eq(1).button("disable"); //禁用提交按鈕
        },
        success:function(responseText,statusText) {
            //alert(responseText); //新增成功，返回1
            if(responseText) {
                $("#reg").dialog("widget").find("button").eq(1).button("enable");
                $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("數據新增成功...");

                setTimeout(function() { //一秒以後執行該function代碼
                    $("#loading").dialog("close");
                    $("#reg").dialog("close");
                    $("#reg").resetForm(); //重置表單
                    $("#reg span.star").html("*").removeClass("succ");
                    $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("數據交互中...");
                }, 1000);
            }
        }
    });
}

故，index.js爲：

$(function() {
    $("#search_button").button({
        icons:{
            primary:"ui-icon-search",
        },
    });

    $("#loading").dialog({
        autoOpen:false,
        modal:true,
        closeOnEscape:false, //按下Esc無效
        resizable:false,
        draggable:false,
        width:180,
        //height:80
        height:50  //height爲什麼從80變爲50，後面會講解到
    }).parent().find(".ui-widget-header").hide(); //去掉header頭

    $("#reg_a").click(function() {
        $("#reg").dialog("open");
    });

    //$("#reg").dailog(...)返回的是jQuery對象，即對話框內容的div(id="reg")對象，因此能夠連綴使用
    $("#reg").dialog({
        autoOpen:false,
        modal:true,
        resizable:false,
        width:320,
        height:340,
        buttons:{
            '提交':function() {
                $(this).submit();
            }
        }
    }).buttonset().validate({
        //輸入驗證成功以後，進行提交
        submitHandler:function(form) {
            //alert("驗證成功，準備提交中！");
            $(form).ajaxSubmit({
                url:"add.php",
                type:"post",
                beforeSubmit:function(formData,jqForm,options) {
                    //提交以前，將「數據正在交互中...」對話框打開
                    //打開以後，高度又默認增長了30，因此在初始化dialog時，height應-30，變爲50
                    $("#loading").dialog("open");

                    //alert($("#reg").dialog("widget").html());
                    //alert($("#reg").dialog("widget").find("button").eq(0).html()); //<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span>
                    //alert($("#reg").dialog("widget").find("button").eq(1).html()); //<span class="ui-button-text">提交</span>
                    $("#reg").dialog("widget").find("button").eq(1).button("disable"); //禁用提交按鈕
                },
                success:function(responseText,statusText) {
                    //alert(responseText); //新增成功，返回1
                    if(responseText) {
                        $("#reg").dialog("widget").find("button").eq(1).button("enable");
                        $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("數據新增成功...");

                        setTimeout(function() { //一秒以後執行該function代碼
                            $("#loading").dialog("close");
                            $("#reg").dialog("close");
                            $("#reg").resetForm(); //重置表單
                            $("#reg span.star").html("*").removeClass("succ");
                            $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("數據交互中...");
                        }, 1000);
                    }
                }
            });
        },
        //錯誤提示出現，對話框高度增長，出現滾動條，因此應去除滾動條
        //每次激活錯誤，都會觸發此屬性
        showErrors:function(errorMap, errorList) {
            var errors = this.numberOfInvalids();
            if(errors > 0) {
                $("#reg").dialog("option","height",errors * 20 + 340);
            } else {
                $("#reg").dialog("option","height",340);
            }
            this.defaultShowErrors(); //執行默認錯誤
        },
        //高亮顯示有錯誤的元素，變色式
        highlight:function(element,errorClass) {
            $(element).css("border","1px solid #630");
            $(element).parent().find("span").html("*").removeClass("succ");
        },
        //恢復默認
        unhighlight:function(element,errorClass) {
            $(element).css("border","1px solid #ccc");
            //element即爲<input>控件
            //$(element).parent().find("span").html("ok");
            $(element).parent().find("span").html("&nbsp;").addClass("succ");
        },
        errorLabelContainer:"ol.reg_error",
        wrapper:"li",
        rules:{
            user:{
                required:true,
                minlength:2
            },
            pass:{
                required:true,
                minlength:6
            },
            email:{
                required:true,
                email:true
            },
            date:{
                date:true
            }
        },
        messages:{
            user:{
                required:"帳號不得爲空！",
                minlength:"帳號不得小於{0}位！"
            },
            pass:{
                required:"密碼不得爲空！",
                minlength:"密碼不得小於{0}位！"
            },
            email:{
                required:"郵箱不得爲空！",
                email:"請輸入正確的郵箱地址！"
            }
        }
    });

    $("#date").datepicker({
        changeMonth:true,
        changeYear:true,
        yearSuffix: ' ',
        maxDate:0, 
        yearRange:"1950:2020",
    });

    $("#email").autocomplete({
        delay:0,
        autoFocus:true,
        source:function(request,response) {
            var hosts = ['qq.com','163.com','126.com','sina.com.cn','gmail.com','hotmail.com'],
                term = request.term, //獲取用戶輸入的內容
                name = term, //郵箱的用戶名，如i_beautiful
                host = '', //郵箱的域名，如sina.com.cn
                ix = term.indexOf('@'), //@的位置
                result = []; //最終呈現的郵箱列表

            result.push(term);
            if(ix > -1) {
                name = term.slice(0, ix);
                host = term.slice(ix + 1);
            }
            if(name) {
                var findedHosts = (host ? $.grep(hosts, function(value, index) {
                        return value.indexOf(host) > -1; }) : hosts),
                    findedResult = $.map(findedHosts, function(value, index) {
                        return name + "@" + value; 
                    });
                result = result.concat(findedResult);
            }
            response(result);
        }
    });

});