Công nghệ Web

Ajax and Json

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' => '[email protected]');
   //dung ham json_encode de chuyen mang $member thanh chuoi JSON
   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
    });
});
  • 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]]>

Leave a Reply

Your email address will not be published. Required fields are marked *