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

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 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 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: ZendVN group - www.zend.vn)