Wirada Blog

Witty tagline

Ajax Php แบบ ง่ายๆ โดยใช้ JQuery

December 28th, 2017

คิดว่า ทุกคนรู้จักอยู่แล้ว ทั้ง Ajax , PHP, JQuery ดังนั้นจะไม่อธิบายทีละตัวให้เสียเวลา เริ่มกันเลยดีกว่า

จะตั้งตัวอย่างคือ เราจะสร้าง input text ขึ้นมา เพื่อรับข้อมูล และจะส่งข้อมูลไปประมวลผลอะไรนิดหน่อย จากนั้นก็เอากลับมาแสดง ในช่องที่ต้องการ

ไฟล์ตัวแรก เป็นตัวที่พบหน้าผู้คน ในที่นี้ขอให้ชื่อว่า index.php
ไฟล์นี้ทำหน้าที่แค่สร้างกล่องอินพุท และ จุดแสดงผล

ไฟล์ตัวที่สองขอตั้งชื่อว่า ajax.js เป็นไฟล์ JQuery ทำหน้าที่จับอีเวนท์และรับข้อมูล จากนั้นก็ส่งเข้า ประมวลผลในไฟล์ตัวที่สาม ให้ชื่อว่า ajax.php และส่งผลกลับมาแสดงในไฟล์ที่1

———————————-
ไฟล์ตัวแรก index.php ลองให้ส่งตัวแปรConstantไปด้วย ตรงคำว่า test น่ะ เปลี่ยนเป็นอะไรก็ได้
———————————-


<?php echo date("m/d/Y H:i:s"); ?>
<input id="aaa" name="aaa" type="text" data-constant="test" autofocus />
<div id="bbb"></div>
<script src="https://code.jquery.com/jquery-3.2.1.js">
</script><script src="ajax.js"></script>

———————————-
ไฟล์ตัวที่สอง ajax.js ชื่อตัวแปรตามใจชอบ
———————————-


$('#aaa').keyup(function(e){
   var key = e.which;
   var kk1 = $('#aaa').val();
   var kk2 = $('#aaa').attr('data-constant');

   if( key > 0 ){
      $.post('ajax.php',{ kk1: kk1 , kk2: kk2 }, function(data){
         $('#bbb').html(data);
      });
   }
});

———————————-
ไฟล์ตัวที่สาม ajax.php เอาง่ายๆเลย แค่รับมาแล้วก็ส่งออกแสดง
———————————-


<?php

# ตรงนี้รับข้อมูล ตัวแปรมีกี่ตัวก็ใส่เข้าไปให้ครบ

$kk1=$_POST["kk1"];
$kk2=$_POST["kk2"];

#ตรงนี้ส่งข้อมูล ง่ายดีไม๊ล่ะ

echo "$kk2 : $kk1";

?>

แค่นี้แหละ

 

 

Bad Behavior has blocked 38 access attempts in the last 7 days.

Business Broker