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 测试部分....