Phương thức POST trong jQuery Ajax

Thảo luận trong 'Ajax' bắt đầu bởi admin, 21/3/16.

  1. admin

    admin Administrator Staff Member

    Tham gia:
    27/3/15
    Bài viết:
    141
    "Thích" đã nhận:
    30
    Điểm nhận Cup:
    28
    Có lẽ hai phương thức post và get trong php không còn xa lạ với các bạn nữa nhỉ? Nhưng với Ajax thì hai phương thức này được thực hiện như thế nào? Để trả lời câu hỏi này thì trong bài này chúng ta sẽ tìm hiểu phương thức POST trước nhé.

    Như bạn biết khi ta muốn gửi thông tin lên server thì phải thông qua form trong html, như vậy ta phải submit form. Nhưng khi làm việc với ajax thì trang web lại không hề reload, bởi vậy jquery ajax có cung cấp cho chúng ta cách hai phương thức POST và GET thông qua thuộc tính type.

    Chúng ta có hai các viết Ajax, cách thứ nhất là sử dụng $.ajax và cách thứ hai là sử dụng $.post.
    1. Phương thức post với $.ajax
    Bạn tạo một file result.php và index.php với nội dung như sau:
    Code:
       
    // Nhập giá trị number bằng phương thức post
    $number = isset($_POST['number']) ? (int)$_POST['number'] : false;
    // Kiểm tra number có lớn hơn không hay không
    if (!$number){
        die ('<h1>Vui lòng nhập một số lớn hơn không (0)</h1>');
    }
    // Lặp từ 1 tới number để in ra màn hình
    for ($i = 1; $i <= $number; $i++){
        echo '<li>Số: '.$i.'</li>';
    }
    Nội dung của file này được giải thích như sau:

    • Đầu tiên biến $number sẽ nhận một giá trị được gửi lên bằng phương thức post với key là number.
    • Sau đó kiểm $number có lớn hơn 0 hay không, nếu không lớn hơn thì lập tức dừng và trả kết quả thông báo lỗi
    • Nếu thỏa điều kiện trên thì sẽ in ra các số từ 1 tới $number và trả về cho Ajax.



      File index.php


      Code:
      <!DOCTYPE html>
      <html>
          <head>
              <title></title>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
              <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
              <script language="javascript">
                  function load_ajax(){
                      $.ajax({
                          url : "result.php",
                          type : "post",
                          dateType:"text",
                          data : {
                               number : $('#number').val()
                          },
                          success : function (result){
                              $('#result').html(result);
                          }
                      });
                  }
              </script>
          </head>
          <body>
              <div id="result">
                  Nội dung ajax sẽ được load ở đây
              </div>
              <br/>
              <input type="text" value="" id="number"/>
              <input type="button" name="clickme" id="clickme" onclick="load_ajax()" value="Click Me"/>
          </body>
      </html>
      Trong file index.php này tôi có tạo một button, một textbox#number và tôi đã thêm vào sự kiện khi click vào button sẽ gọi đến hàm load_ajax(). Nội dung của hàm load_ajax()gồm các thông số được giải thích như bên dưới:
      Code:
      function load_ajax(){
          $.ajax({
              url : "result.php", // gửi ajax đến file result.php
              type : "post", // chọn phương thức gửi là post
              dateType:"text", // dữ liệu trả về dạng text
              data : { // Danh sách các thuộc tính sẽ gửi đi
                   number : $('#number').val()
              },
              success : function (result){
                  // Sau khi gửi và kết quả trả về thành công thì gán nội dung trả về
                  // đó vào thẻ div có id = result
                  $('#result').html(result);
              }
          });
      }



     

    Bình Luận Bằng Facebook

  2. kids1412

    kids1412 New Member

    Tham gia:
    10/1/17
    Bài viết:
    2
    "Thích" đã nhận:
    0
    Điểm nhận Cup:
    1
    Giới tính:
    Nam
    Trang chủ:
    Bài viết của bạn rất thuyêt phục, mình sẽ lưu lại chia sẻ cho đồng nghiệp người thân đọc, Mình có vài câu hỏi gửi bạn trong inb bạn kiểm tra giúp mình nhé. Nhân tiện bạn có nhu cầu mua chung cư, hay mua nhà, hay mua biệt thự khu lien ke thanh ha không?
     

Share This Page