Чтобы сделать 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']
Youтакже можно увидеть, что вы получаете в запросе 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");
});