Чтобы сделать Ajax-запрос с использованием jQuery, вы можете сделать это с помощью следующего кода.
HTML:
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
<!-- The result of the search will be rendered inside this div -->
<div id="result"></div>
JavaScript:
Способ 1
/* Get from elements values */
var values = $(this).serialize();
$.ajax({
url: "test.php",
type: "post",
data: values ,
success: function (response) {
// You will get response from your PHP page (what you echo or print)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
Способ 2
/* Attach a submit handler to the form */
$("#foo").submit(function(event) {
var ajaxRequest;
/* Stop form from submitting normally */
event.preventDefault();
/* Clear result div*/
$("#result").html('');
/* Get from elements values */
var values = $(this).serialize();
/* Send the data using post and put the results in a div. */
/* I am not aborting the previous request, because it's an
asynchronous request, meaning once it's sent it's out
there. But in case you want to abort it you can do it
by abort(). jQuery Ajax methods return an XMLHttpRequest
object, so you can just use abort(). */
ajaxRequest= $.ajax({
url: "test.php",
type: "post",
data: values
});
/* Request can be aborted by ajaxRequest.abort() */
ajaxRequest.done(function (response, textStatus, jqXHR){
// Show successfully for submit message
$("#result").html('Submitted successfully');
});
/* On failure of request this function will be called */
ajaxRequest.fail(function (){
// Show error
$("#result").html('There is error while submit');
});
.success(), .error()И .complete()обратные вызовы являются устаревшим JQuery 1.8 . Для того, чтобы подготовить свой код для их последующего удаления, использовать .done(), .fail()и .always()вместо этого.
MDN: abort(), Если запрос уже отправлен, этот метод прервет запрос.
Итак, мы успешно отправили запрос Ajax, и теперь пришло время собирать данные на сервер.
PHP
Как сделать запрос POST в Ajax вызова ( type: "post"), мы можем теперь данные захватить с помощью либо $_REQUESTили $_POST:
$bar = $_POST['bar']
Вы также можете увидеть, что вы получаете в запросе POST, просто либо. Кстати, убедитесь, что $_POSTустановлено. В противном случае вы получите ошибку.
var_dump($_POST);
// Or
print_r($_POST);
И вы вставляете значение в базу данных. Убедитесь, что вы сенсибилизируете или экранируете все запросы (независимо от того, сделали ли вы GET или POST) перед выполнением запроса. Лучше всего было бы использовать подготовленные заявления .
И если вы хотите вернуть какие-либо данные обратно на страницу, вы можете сделать это, просто повторив эти данные, как показано ниже.
// 1. Without JSON
echo "Hello, this is one"
// 2. By JSON. Then here is where I want to send a value back to the success of the Ajax below
echo json_encode(array('returned_val' => 'yoho'));
И тогда вы можете получить это как:
ajaxRequest.done(function (response){
alert(response);
});
Есть несколько сокращенных методов . Вы можете использовать приведенный ниже код. Это делает ту же самую работу.
var ajaxRequest= $.post("test.php", values, function(data) {
alert(data);
})
.fail(function() {
alert("error");
})
.always(function() {
alert("finished");
});