Site icon PlusMagi's Blog By Pitt Phunsanit

ส่งข้อมูลแบบ Ajax ด้วย JQuery

ถ้าสมมุติว่าฟอร์มที่ส่งข้อมูลเดิมของเราเขียน

เราจะแปลงให้ส่งข้อมูลแบบ Ajax ได้โดย แก้เป็น

<form id="testF" method="post">…</form>
<script src="plus/jQuery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){
/*เริ่มทำงานเมื่อโหลดหน้าเสร็จ*/
    $('#testF').submit(function(){
/* ทำงานเมื่อฟอร์มไอดี testF โดนซับมิต*/
        data=$('#testF').serialize()
/*ดึงค่าจากฟอร์มไอดี testF ทั้งหมด*/
        $.post('jQueryAjax.php' ,data ,function(response){
/* รูปแบบคือ $.post(ไฟล์ปลายทาง ,ข้อมูล ,ฟังก์ชั่นที่จะทำเมื่อไฟล์ปลายทางตอบกลับมา)*/
            alert(response);
        });
        return false;
    });
})
</script>

ตัวอย่าง
บันทึกเป็นไฟล์ชื่อ jQueryAjax.php

<?php
if($_POST['iusername'] != ''){
    echo 'ได้รับ ค่า iusername = '.$_POST['iusername']."\nipassword = ".$_POST['ipassword'];
    exit();
}else{
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ส่งข้อมุลแบบ post ด้วย jQuery</title>
<script src="plus/jQuery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){alert('12');
    $('#testF').submit(function(){
        data=$('#testF').serialize()
        $.post('jQueryAjax.php' ,data ,function(response){
            alert(response);
        });
        return false;
    });
})
</script>
</head>
<body>
<form id="testF" method="post">
  <label for="iusername">รหัสผู้ใช้</label>
  <input type="text" name="iusername">
  <br>
  <label for="ipassword">รหัสผ่าน</label>
  <input type="password" name="ipassword">
  <input type="submit" name="isubmit" value="ส่งข้อมูล">
</form>
</body>
</html>
<?php
}
Exit mobile version