การส่งข้อมูลแบบ post ด้วย ajax ของ jquery

HTML Code

<form id="form1" name="form1" method="post" action="">
  <p>ชื่อ
    <input type="text" name="name" id="name" />
    <br />
    อีเมลล์
    <input type="text" name="email" id="email" />
    <br />
    <input type="button" name="Send" id="Send" value="Send" />
  </p>
</form>

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input#Send").click(function(){
		var url="test.php"; // ไฟล์ที่ต้องการรับค้า
		var dataSet={ name: $("input#name").val(), email: $("input#email").val() }; // กำหนดชื่อและค่าที่ต้องการส่ง
		$.post(url,dataSet,function(data){
    		alert("แจ้งเเมื่อทำการส่งข้อมูลเรียบร้อยแล้ว");
 		 });
	});
});
</script>

ไฟล์ test.php สำหรับดำเนินการกับค่าที่รับจากฟอร์มที่ส่งมา

<?php
if(isset($_POST['name']) && $_POST['name']!=""){
	echo $_POST['name']; // ตัวอย่าง
}
?>

บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

25 Sep 08 Jquery javascript library มาแรง อ่าน 1863 14 Nov 08 สร้างป้ายโฆษณาเลื่อนตามจอภาพ ด้วย jquery ได้ในไม่กี่บรรทัด อ่าน 1860 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 1841 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 1793 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 1735 25 Sep 08 เริ่มต้นกับ jquery อ่าน 1707 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 1622 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 1603 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 1599 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 1547 16 Nov 08 jQuery กับการจำกัดการเลือก checkbox อ่าน 1512 26 Feb 09 การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery อ่าน 1508 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 1488 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 1456 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 1446
จำนวนผู้เยี่ยมชม 85516 คน 2010 © Copyright ninenik.com. All rights reserved.