Question

当用户将数据插入表单然后提交时，它会转到我的php脚本并插入数据。该脚本将返回一个值，让用户知道数据是否已插入。由于我使用的是JQuery，我不知道如何做到这一点。有人可以指点我正确的方向吗？我在这里的所有内容都是一个漂亮，整洁的小型200px x 25px容器，它将会淡入，并且用户必须单击它才能确认它。

现在我想到了，因为用户并不是港口最亮的灯，如果我不仅能够展示这个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注入。这是一个例子，所以看起来像这样：

$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，并在您的文档中添加一个您可以随意设置样式的元素（并显示{{1}之类的内容如果你愿意）用一条描述发生的事情的消息。您可能还需要捕获错误回调（如果您的服务器因任何原因没有响应而触发）并在该情况下触发另一个警报。

Answer 2

Fading effects可以通过执行以下操作之一来完成：

jQuery(myDiv).fadeIn()
jQuery(myDiv).fadeOut()
jQuery(myDiv).fadeTo()

我建议你先创建这个css框 - 创建html和css。然后你可以试验淡入淡出 - jQuery允许你指定渐变颜色，淡入淡出持续时间等参数。

Answer 3

这是可以使用的东西...

您的PHP脚本根据结果输出

$json = array(
    'success' => $insertSuccess,
    'message' => $numRecords . ' records inserted in ' . $insertTime . 's'
);

echo json_encode($json);

然后，在JSON的回调中，您可以通过解析JSON对象来确定插入是否成功。你的回调可能看起来像这样

function(data) {

    success = data.insertedSuccess;

    if (success) {
         $('#success').fadeIn(1000);
    } else {
         $('#failure').fadeIn(1000);
    }

}

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

3 个答案: