javascript - 如何让 jquery css 容器弹出让用户知道数据已成功输入？

Question

当用户将数据插入表单然后提交时，它会转到我的 php 脚本并插入数据。该脚本将返回一个值，让用户知道数据是否已插入。由于我使用的是 JQuery，所以我不知道该怎么做。有人可以指出我正确的方向吗？我所追求的是一个漂亮、整洁的 200 像素 x 25 像素小容器，它将淡入并且用户必须单击它以确认它。

现在我想起来了，因为用户不是港湾里最亮的灯，如果我不仅可以展示这个 css 框让他们知道插入是否成功，还可以向他们展示客户，那就太酷了这是插入的以防他们忘记他们离开的地方。

谢谢。

Answer 1

我不会将其标记为重复，但您实质上是在询问使用 jQuery 显示通知的最佳方式。那是asked before .简而言之，在您的基本设置中，您需要做的就是显示一个 div 并将其淡入，但有很多插件可以处理更多情况。

至于向他们显示插入的客户或其他任何内容，您所要做的就是从服务器返回一个 JSON 响应并使用 AJAX 请求的成功回调处理它。然后您将可以访问从服务器传回的数据。

进一步解释一下:您似乎想要做的是如何使用 Ajax 向服务器发送请求，获得一切都按预期进行的通知，然后根据发生的情况在网页中显示通知.如果那是正确的，我将继续这些假设。

让我们整理一个简单的表单，将新客户添加到一个虚构的网站。它可能看起来像这样:

<form action='add_customer.php' method='POST' id='add_customer_form'>
    First Name: <input type='text' name='first_name'><br>
    Last Name: <input type='text' name='last_name'><br>
    Email: <input type='text' name='email'><br>
    <input type='submit' value='Add Customer'>
</form>

现在，我们处理此表单提交(通过 AJAX)的 天真、不安全 PHP 代码可能看起来像这样。我说天真和不安全是因为你会做更多的数据验证(因为你从不相信来自客户端的任何东西)并且肯定需要清理数据以防止 SQL 注入(inject)。然而，这是一个示例，因此它可能看起来像这样:

$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
if(mysql_query("
    INSERT INTO customers
    (first_name, last_name, email)
    VALUES 
    ('$first_name','$last_name','$email')
   ")) {
    $success = 1;
    $message = 'Customer ' . $first_name . ' successfully added!';
} else {
    $success = 0;
    $message = 'Something went wrong while adding the customer!';
}
print json_encode(array('success' => $success, 'message' => $message));

然后我们可能会使用 jQuery 处理此表单的发送和从服务器接收数据，代码看起来有点像这样:

$(function() {
    $('#add_customer_form').submit(function() { // handle form submit
        var data = $(this).serialize(); // get form's data
        var url = $(this).attr('action'); // get form's action
        var method = $(this).attr('method'); // get form's method
        $.ajax({
            url: url, // where is this being sent to?
            type: method, // we're performing a POST
            data: data, // we're sending the form data
            dataType: 'json', // what will the server send back?
            success: function(data) { // the request succeeded, now what?
                // here data is a JSON object we received from the server
                // data.success will be 0 if something went wrong
                // and 1 if everything went well. data.message will have
                // the message we want to display to the user
                // at this point you would use one of the techniques I linked
                // to in order to display a fancy notification

                // the line below will dynamically create a new div element,
                // give it an ID of "message" (presumably for CSS purposes)
                // and insert the message returned by the server inside of it
                var $div = $('<div>').attr('id', 'message').html(data.message);

                if(data.success == 0) {
                    $div.addClass('error'); // to personalize the type of error
                } else {
                    $div.addClass('success'); // to personalize the type of error
                }
                $('body').append($div); // add the div to the document
            }
        });
        return false; // prevent non-ajax form submission.
    });
});

我还没有测试过这段代码的任何部分，但想法是存在的。您从服务器返回一个带有数据的格式 JSON，并处理请求完成时触发的成功回调 jQuery，并向您的文档添加一个元素，您可以根据需要设置样式(并显示 fadeIn () 如果你愿意的话)和一条描述发生了什么的消息。您可能还需要捕获错误回调(如果您的服务器出于任何原因未响应，则会触发该回调)并在这种情况下触发另一个警报。