Bài 03: JQuery ajax POST và GET

Ajax 10/01/2016 07:00 949
Trong bài trước mình đã giới thiệu về hàm JQuery $.ajax(). Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng hai hàm đó là $.post() và $.get() trong JQuery ajax.

Hàm $.ajax() là hàm tổng quát trong JQuery ajax khi bạn sử dụng hàm này bạn có nhiều tuy chọn hơn bằng cách bạn có thể  truyền được nhiều thuộc tính hơn đi đôi với nó là sẽ có nhiều hàm xử lý kết quả và xử lý lỗi hơn.

Hai hàm $.post() và $.get() là hai hàm được bóc tách từ hàm tổng quát nhưng mỗi hàm chỉ sử dụng duy nhất một phương thức truyền dữ liệu mà thôi.

1. $.post() với phương thức POST.

Với phương thực này cho phép chúng ta thực thi ajax gửi dữ liệu lên từ client nên server-side theo phương thức POST. Tương ứng với nó phía server-side sẽ lấy dữ liệu bằng phương thức HTTP POST REQUEST.

Cú pháp.

$.post(url, params, callback)

Trong đó:

  • Url: Là địa chỉ của file[hàm] xử lý dữ liệu phía server-side.
  • Params: Là một đối tượng lưu giữ các biến gửi lên server
  • Callback: Là hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành
  • Ví dụ: Mình vẫn sử dụng ví dụ trước.

    File index.html

    <html>
    <head>
    <title>Simple Ajax Example</title>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
    function xmlhttpPost() {
    	 $.post("result.php", {'w': $('input[name=word]').val()},
            function(result){
                $("#result").html(result);
            }
        );
    }
    </script>
    </head>
    <body>
    <form name="f1">
      <p>
        <label>Nhập vào một câu</label>
        <input name="word" type="text">
        <input value="Go" type="button" onclick='JavaScript:xmlhttpPost(); return false;'>
      </p>
      <div id="result"></div>
    </form>
    </body>
    </html>

    File result.php

    <?php 
    	$w = isset($_POST['w']) ? trim($_POST['w']) : 'Empty';
    	echo 'Bạn đã nhập vào câu: <strong>'.$w.'<strong>'; die();
    ?>

    Xem kết quả

    2. $.get() với phương thức GET.

    Với phương thực này cho phép chúng ta thực thi ajax gửi dữ liệu lên từ client nên server-side theo phương thức GET. Tương ứng với nó phía server-side sẽ lấy dữ liệu bằng phương thức HTTP GET REQUEST.

    Cú pháp:

    $.get(url, params, callback)

    Trong đó:

  • Url: Là địa chỉ của file[hàm] xử lý dữ liệu phía server-side.
  • Params: Là một đối tượng lưu giữ các biến gửi lên server
  • Callback: Là hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành
  • Ví dụ:

    <html>
        <head>
            <title>Jquery ajax GET</title>
            <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script type="text/javascript">
            function xmlhttpPost() {
                 $.get("result.php", {'w': $('input[name=word]').val()},
                    function(result){
                        $("#result").html(result);
                    }
                );
            }
        </script>
        </head>
        <body>
        <form name="f1">
          <p>
            <label>Nhập vào một câu</label>
            <input name="word" type="text">
            <input value="Go" type="button" onclick='JavaScript:xmlhttpPost(); return false;'>
          </p>
          <div id="result"></div>
        </form>
        </body>
    </html>

    File result.php

    <?php 
    	$w = isset($_GET['w']) ? trim($_GET['w']) : 'Empty';
    	echo 'Bạn đã nhập vào câu: <strong>'.$w.'<strong>'; die();
    ?>

    3. Tổng kết

    Thông qua các bài viết này có lẽ bây giờ bạn đã hiểu phần nào kỹ thuật ajax sử dụng JQuery. ajax đã là một kỹ thuật tuyệt vời rồi & sự kết hợp giữa JQuery và ajax làm cho ajax càng trờ nên mạnh mẽ hơn bao giờ hết. Ajax được ứng dụng trong các chức năng về phân trang, tìm kiếm, submit form, upload file, load nội dung....

    Xem Thêm

    Profile photo of adminTheHalfHeart

    B.V.T

    Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.