Я не собираюсь отмечать это как дубликат, но вы, по сути, спрашиваете, как лучше всего показывать уведомления, используя jQuery. И это было задано до . Короче говоря, в вашей базовой установке все, что вам нужно сделать, это показать 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>
Теперь наш наивный, небезопасный PHP-код для обработки этой отправки формы (через AJAX) может выглядеть примерно так. Я говорю наивно и небезопасно, потому что вам нужно больше проверять данные (поскольку вы никогда не доверяете всему, что приходит от клиента), и вам, безусловно, потребуется очистить данные, чтобы предотвратить инъекции 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, когда запрос завершен, и добавляете в документ элемент, который можете стилизовать так, как вы хотите (и показывать с такими вещами, как fadeIn(), если Вы хотите) с сообщением, описывающим, что произошло. Вам также может понадобиться перехватить сообщение об ошибке (которое срабатывает, если ваш сервер не отвечает по какой-либо причине) и запустить другое предупреждение в этой ситуации.