Запит даних на сервері і їх виведення без перезавантаження
Аргументи:
type - тип запиту GET/POST
url - адреса сторінки php-обробника запиту
data - дані, що передаються
dataType - очікуваний тип даних, що повертаються (html - автоматично)
Функції:
.done(function(data){ ...}); - функція обробки отриманих даних
.fail(function (jqXHR, textStatus, errorThrown) { serrorFunction(); }); - метод обробки помилок
Приклади
Аjax GET htmlВідправимо дані на php-обробник (demo/page1.php), там складемо їх і повернемо суму.
Чиcло Х : Чиcло Y :
$('#btn1').click(function(){
var X = $('#nX').val();
var Y = $('#nY').val();
$.ajax({
type: "GET",
url: "demo/page1.php",
data:({x:X, y:Y}),
}).done (function(data){
$('#info1').html("Сума: "+data);
});
});
$('#btn1').click(function(){
var X = $('#nX').val();
var Y = $('#nY').val();
$.ajax({
type: "GET",
url: "demo/page1.php",
data:({x:X, y:Y}),
success: function(data){
$('#inf1').html("Сума: "+data);
},
});
});Чиcло Х : <input name="numX" type="text" id="nX" size="3" value="33"/> Чиcло Y : <input name="numY" type="text" id="nY" size="3" value="67"/> <input type="button" value="Відправка" id="btn1"/> <div id="inf1"></div>
<?php $x=$_GET["x"]; $y=$_GET["y"]; echo $x+$y; ?>
Аjax GET json
Відправимо порядковий номер посилання, збільшений на 1, на php-обробник (demo/page2.php), отримаємо результат у форматі json.
$('#da a').click(function(event){
event.preventDefault();
var ind = $('#da a').index(this)+1;
$.ajax({
type: "GET",
url: "demo/page2.php",
data:({x:ind}),
dataType: "json",
}).done (function(data){
$('#inf2').html(data.number+" +50= "+data.sum);
});
});<?php $x=$_GET["x"]; $res['number']= $x; $res['sum'] = $res['number']+50; echo json_encode($res); ?>
Аjax POST html
Відправимо дані на php-обробник (demo/page3.php), там складемо їх і повернемо суму.
Чиcло Z : Чиcло Q :
$('#bt3').click(function(){
var X = $('#numZ').val();
var Y = $('#numQ').val();
$.ajax({
type: "POST",
url: "demo/page3.php",
data:({x:X, y:Y}),
dataType: "html",
}).done (function(result){
$('#inf3').html("Сума: "+result);
});
});<?php $x=$_POST["x"]; $y=$_POST["y"]; echo $x+$y; ?>
Аjax POST json
Відправимо порядковий номер посилання на php-обробник (demo/page4.php) і повернему у форматі json.
$('#du a').click(function(event){
event.preventDefault();
var index = $('#du a').index(this);
$.ajax({
type: "POST",
url: "demo/page4.php",
data:({x:index}),
dataType: "json",
}).done (function(data){
$('#inf4').html(data.link+data.numb);
});
});<?php $x=$_POST["x"]; $res['link']= 'Посилання: '; $res['numb'] = $x ; echo json_encode($res); ?>
далі ✏