Ajax and Json

Tạo file service

//get URL cua file hien tai; 
$baseUrl = $_SERVER['PHP_SELF'];
 
//kiem tra thong tin request den
if (isset($_POST['getMember']) && $_POST['getMember'] == 'view')
{
    //wating 1s truoc khi thuc thi
    sleep(1);
     
    //tao mang member
    $member = array('username' => 'phucvh'
                   ,'password' => '123456'
                   ,'email' => 'ahoangphuc@gmail.com');
                    
   //dung ham json_encode de chuyen mang $member thanh chuoi <a class="zem_slink" title="JSON" href="http://en.wikipedia.org/wiki/JSON" target="_blank" rel="wikipedia noopener">JSON</a>
   echo json_encode($member);
    
   //ket thuc tra ve du lieu va stop khong cho chay tiep
   die;
}

//get URL cua file hien tai;

$baseUrl = $_SERVER['PHP_SELF'];

//kiem tra thong tin request den

if (isset($_POST['getMember']) && $_POST['getMember'] == 'view')

{

//wating 1s truoc khi thuc thi

sleep(1);

//tao mang member

$member = array('username' => 'phucvh'

,'password' => '123456'

,'email' => 'ahoangphuc@gmail.com');

//dung ham json_encode de chuyen mang $member thanh chuoi <a class="zem_slink" title="JSON" href="http://en.wikipedia.org/wiki/JSON" target="_blank" rel="wikipedia noopener">JSON</a>

echo json_encode($member);

//ket thuc tra ve du lieu va stop khong cho chay tiep

die;

}

Xử lý Ajax phía client

$(document).ready(function(){
    // Gắn sự kiện onclick vào #viewbtn
    $('#viewbtn').click(function() {
        $('#loading').html('Loading...');
        var strURL = $('#base_url').val();
        $.ajax({
            url: strURL,
            type: 'POST',
            cache: false,
            data: 'getMember=view',
            success: function(string){
             
                /**
                 * Kiểu mặc định trả về là dạng String, bạn dùng hàm parseJSON để phân tích dữ liệu trả về
                 * có 2 cách parse JSON là : JSON.parse() và $.parseJSON();
                 * 1. var getData = JSON.parse(string);
                 * 2. var getData = $.parseJSON(string);
                **/
                var getData = $.parseJSON(string);
                //input dữ liệu lấy về từ server vào textbox
                $('#txt_username').val(getData.username);
                $('#txt_password').val(getData.password);
                $('#txt_email').val(getData.email);
                 
                //Trả loading về trạng thái ban đầu
                $('#loading').html(' ');
            },
            error: function (){
                alert('Có lỗi xảy ra');
            }
        });
    });
     
    // Gắn sự kiện onclick vào #resetbtn
    $('#resetbtn').click(function() {
        $('input:text').val(''); // xóa hết dữ liệu trong textbox
    });
});

$(document).ready(function(){

// Gắn sự kiện onclick vào #viewbtn

$('#viewbtn').click(function() {

$('#loading').html('Loading...');

var strURL = $('#base_url').val();

$.ajax({

url: strURL,

type: 'POST',

cache: false,

data: 'getMember=view',

success: function(string){

/**

* Kiểu mặc định trả về là dạng String, bạn dùng hàm parseJSON để phân tích dữ liệu trả về

* có 2 cách parse JSON là : JSON.parse() và $.parseJSON();

* 1. var getData = JSON.parse(string);

* 2. var getData = $.parseJSON(string);

**/

var getData = $.parseJSON(string);

//input dữ liệu lấy về từ server vào textbox

$('#txt_username').val(getData.username);

$('#txt_password').val(getData.password);

$('#txt_email').val(getData.email);

//Trả loading về trạng thái ban đầu

$('#loading').html(' ');

error: function (){

alert('Có lỗi xảy ra');

}

});

// Gắn sự kiện onclick vào #resetbtn

$('#resetbtn').click(function() {

$('input:text').val(''); // xóa hết dữ liệu trong textbox

});

url: đuờng dẫn file php sẽ xử lý yêu cầu của bạn
type: kiểu dữ liệu bạn gửi lên Server (POST, GET)
data: dữ liệu bạn gửi lên là gì? (getMember= view)
success: khi server xử lý thành công sẽ trả về ở đây, tai đây bạn sẽ xử lý phân tích chuỗi JSON, và điền dữ liệu vào các textbox.
=> dùng hàm $.parseJSON(string) để phân tích chuỗi JSON, trong đó string là khối dữ liệu trả về từ phía Server.

Nguồn: http://ntuts.com/jquery/huong-dan/ket-hop-su-dung-json-ajax-voi-jquery-va-php

–soiqualang.chentreu