Ajax trong JQuery (P2) - Gửi dữ liệu từ Form đến Server

Thảo luận trong 'Javascript và AJAX' bắt đầu bởi friendntt10, 16/2/13.

  1. friendntt10

    friendntt10 Đang làm quen

    Tham gia ngày:
    25/11/12
    Bài viết:
    208
    Đã được thích:
    0
    Điểm thành tích:
    16
    jQuery có một hàm đặc biệt nó giúp bạn đưa dữ liệu từ Form đến máy chủ qua hàm load() đó là hàm serializeArray()

    Hàm này sẽ không có các tham số, nó tạo ra một đối tượng lưu trữ các thuộc tính của Form sau khi các bạn đã cung cấp tên Form cho nó. Hàm serializeArray() giúp bạn dể dàng gửi toàn bộ dữ liệu của form đến server.

    Ví dụ 4: Trong ví dụ này chúng ta sẽ để người sử dụng nhập giá trị 1 hay 2 vào ô textbox và sau đó gửi dữ liệu này đến trang poster.php trên server. Và sau đó chúng ta sẽ nhận được giá trị trả về

    HTML:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="js/jquery-1.4.js" type="text/javascript"></script>
    <script>
          function checker()
          {
    		  $("div").load("poster.php",  
    		  $("#targetForm").serializeArray(  ));
          }
    </script>
    </head>
    
    <body>
      <h1>Using the jQuery serializeArray(  ) function</h1>
      <form id="targetForm">
      Enter a 1 or 2: 
      <input type="text" name="data" id="data"></input>
       <input type="text" name="data1" id="data1"></input>
    	 <input type = "button" value="Check data" onclick="checker(  )"></input>
      </form>
      <br>
      Got this from the server: <div></div>
    </body>
    </html>
    
    Tập tin poster.php

    HTML:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <?php
    if ($_POST["data"] == "1") {
    	echo 'You sent the server a value of 1';
    }
    
    if ($_POST["data"] == "2") {
    	echo 'You sent the server a value of 2';
    }
    ?>
    
    </body>
    </html>
    Nguồn: Zend.vn
     
Đang tải...

Chia sẻ trang này