29. Короткі запити ajax

Запит даних на сервері і їх виведення без перезавантаження

$.get() - скорочений запис для Ajax GET
$.post() - скорочений запис для Ajax POST
.load() - завантаження даних з інших сторінок

Приклади

$.get() html

Відправимо дані на php-обробник (demo/page1.php), там складемо їх і повернемо суму.

Чиcло Х : Чиcло Y :

$('#btn1').click(function(){
            var pX = $('#nX').val();
            var pY = $('#nY').val();
         $.get(
             'demo/page1.php',
             {x:pX,y:pY},
             function (data){
        	     $('#inf1').html("Сума: "+data);
        	});   
});

Html - код

Чиcло Х : <input  type="text" id="nX" size="3" value="33"/>
Чиcло Y : <input  type="text" id="nY" size="3" value="67"/>
<input type="button" value="Відправка" id="btn1"/>
<div  id="inf1"></div>

PHP- код (demo/page1.php)

<?php
$x=$_GET["x"];
$y=$_GET["y"];
echo $x+$y;
?>

$.get() json

Відправимо порядковий номер посилання, збільшений на 1, на php-обробник (demo/page2.php), отримаємо результат у форматі json.

#da
Посилання №1
Посилання №2

$('#da a').click(function(event){
 	event.preventDefault();
            var ind = $('#get2 a').index(this)+1;
      $.get(
             'demo/page2.php',
             {x:ind},
             function (data){
        	     $('#info2').html(data.number+" +50= "+data.sum); 
        	     },
        	 "json"
        	);         
    
         }); 
});

PHP - код (demo/page2.php)

<?php
$x=$_GET["x"];
$res['number']= $x;
$res['sum'] = $res['number']+50;
echo json_encode($res);
?>

$.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- код (demo/page3.php)

<?php
$x=$_POST["x"];
$y=$_POST["y"];
echo $x+$y;
?>

$.post() json

Відправимо порядковий номер посилання на php-обробник (demo/page4.php) і повернему у форматі json.

#du
Посилання 0
Посилання 1

$('#du a').click(function(event){
 	event.preventDefault();
            var ind = $('#du a').index(this);
     $.post(
            'demo/page4.php',
             {x:ind},
             function (data){
               $('#infopost2').html(data.link+data.numb);},
            "json"
            );     
     });  
});

PHP - код (demo/page2.php)

<?php
$x=$_POST["x"];
$res['link']= 'Посилання: ';
$res['numb'] = $x ;
echo json_encode($res);
?>

.load

Завантажемо один з блоків, що знаходяться на сторінці page.php в залежності від відправлений даних у запиті

Виберемо блок по порядковому номеру на сторінці і завантажимо інформацію:

$('#seload').change(function(){  
            var numb = $(this).find('option:selected').text();      
   $('#inf1').load('page.php  div:eq('+numb+')',
           function (){
           	      $('#inf1').append(' - запуск функції');
    });
});

Сторінка page.php

      Інформація з нульового блоку	
      Інформація з першого блоку	
      Інформація з другого блоку

.load зі зміною в адресному рядку (без демонстрації)

По порядковому номеру посилання на головній сторінці вибираємо блок інформації з таким самим порядковим номером на іншій сторінці (наприклад db.php), яка містить блоки інформації, що мають class .content. Таким чином клік по кожному посиланню буде завантажувати відповідний блок інформації.

 $(document).ready(function(){ 
 var number_page;
      // перший запуск функції 
        f_view();
   
    
    // функція отримання hash та завантаження інформації
  function  f_view(){
  number_page = window.location.hash.slice(1);
     if (number_page == ""){
	       number_page = 1;};
	       $('#content').load('bd.php  .content:eq('+number_page+')');
	   };
       
 // клік по посиланню меню
 $('#menu a').click(function(e){
   	     e.preventDefault();
          var index1 = $('#menu a').index(this)+1;
          window.location.hash=index1;
          f_view();
   });
   // подія генерується браузером при переході по сторінкам  назад - вперед onpopstate
    onpopstate = function(event) {
      var wlhash = window.location.hash.slice(1);
       f_view();
    }
 
});/*end  ready*/

далі ✏