jQuery 到數據庫 - 帶有驗證的注冊表單

Question

我在 9lessons.com: http://www.9lessons.info/2011/01/gravity-registration-form-with-jquery.ZFC35FDC70D5FC69D269883A822E

這是關於帶有驗證的注冊表單。

我想將數據發送到數據庫。

// Submit button action
$('#submit').click(function()
{
    var email=$("#email").val();
    var username=$("#username").val();
    var password=$("#password").val();
    if(ck_email.test(email) && ck_username.test(username) && ck_password.test(password) )
        {
            $("#form").show().html("<h1>Thank you!</h1>");
                    /////   if OK
                    /////       Show thanks
                    ////    else
                    ////        Error, try again
        }
    return false;
});

我能怎么做？？ 我在網上搜索了 jQuery 教程，發現很多代碼......

Answer 1

本教程將引導您完成整個過程： http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

它實現 jQuery.post 並調用 PHP 腳本，允許您處理數據。

Answer 2

您將需要使用 Ajax 將數據提交到后端腳本（例如 PHP）以進行實際的數據庫交互。 我建議使用 POST：

http://api.jquery.com/jQuery.post/

Answer 3

您可以使用 jquery 發布方法

$.post("test.php", $("#testform").serialize());

或欲了解更多詳細信息，請訪問此鏈接jquery 表單發布方法

Answer 4

最后我將數據表單插入數據庫......我有一個問題......我忘了驗證 email 是否可用！

我在 email 驗證的其他教程中添加了這一行，以測試 DB 中是否存在 email。

首先我發送 email 到check_availability.php

如果郵件存在，則會出現錯誤消息，否則必須出現密碼字段...

就像您在圖片中看到的那樣，我驗證了 email 地址的存在，並且出現了可用性和不可用性消息但不正確...

$('#email').keyup(function()
{
    var email=$(this).val();
    if (!ck_email.test(email)) 
    {
        $(this).next().show().html("Enter valid email");
    }
    else
    {
        //$(this).next().hide();
        //$("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
                    $.ajax
                        ({
                            type: "POST",
                            url: "user_availability.php",
                            data: "email="+ email,
                            success: function(msg)
                            {
                                $("#status").ajaxComplete(function(event, request, settings)
                                {
                                    if(msg == 'OK')
                                    {
                                        /*$("#email").removeClass('object_error'); // if necessary
                                        $("#email").addClass("object_ok");
                                        $(this).html(' <img align="absmiddle" src="accepted.png" /> ');*/
                                        //////////////////
                                        $(this).next().hide();
                                        $("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
                                        //////////////
                                    }
                                    else
                                    {
                                        $("#email").removeClass('object_ok'); // if necessary
                                        $("#email").addClass("object_error");
                                        $(this).html(msg);
                                    }
                                });
                            }
                        });

    }

});

前兩個注釋行是用於顯示下一個字段的默認行//$("li").next("li.password").slid...

就像你看到的那樣，我將它們添加到 Ok 測試部分....