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";

?>

แค่นี้แหละ

Comments are closed.

 

WHAT's NEW?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.

Important links

sNews Single file CMS

Solucija Information Architecture, CSS

360 Web Design Accessible Web Design

 

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