Wirada Blog

Witty tagline

JSON กับ jQuery เป็นญาติกันล่ะมั้งนะ

January 19th, 2018

ถ้าเราเคยเล่น AJAX กับ PHP โดยใช้ jQuery จะเห็นว่า เราแทบจะเลี่ยงไม่ได้เลยที่จะต้องใช้ JSON เพราะตอนส่งข้อมูลจาก PHP ที่ประมวลผลแล้วกลับมายัง jQueryScript น่ะ มันส่งโดยการแสดงผล นั่นคือ การทำงานแต่ละครั้งมันดาต้าได้แค่ก้อนเดียว และ JSON มันช่วยให้ดาต้าก้อนนั้นมันมีรายละเอียดเอาไปแยกเป็นส่วนได้ง่ายๆ มันจึงเป็นคำตอบที่ตรงประเด็นที่สุด

JSON คือ อะไร ช่างหัวมันเถอะ แต่ใช้ยังไงนี่ตะหากน่าสนใจ สรุปคือ มันใช้ส่งข้อมูลแบบ Array ในรูปแบบเฉพาะของมัน ดังนี้
1- แบบไม่มีชื่อตัวแปร
[ “ค่าที่0″,”ค่าที่1″,”ค่าที่2” .. ไปเรื่อยๆจนพอใจ แล้วปิดด้วย ] วงเล็บเหลี่ยมๆนะ ไม่ใช่ปีกกา
ตอนjQuery อ่านค่าก็จะลงเป็น Array เช่น data[0] หรือ data[1] เป็นต้น
2- แบบมีชื่อตัวแปร
{ “ชื่อตัวแปร1″:”ค่าของตัวแปร1”, “ชื่อตัวแปร2″:”ค่าของตัวแปร2” .. ไปเรื่อยๆจนพอใจ แล้วปิดด้วย }
อ่านด้วย jQuery ก็จะเป็น data.ชื่อตัวแปร1 หรือ data.ชื่อตัวแปร2 อะไรอย่างนี้ เป็นต้น
แค่นี้แหละ ก็คือ รูปแบบมันใช้ง่าย คนเลยนิยม

คราวนี้ถ้าเราเขียนเป็น PHP ก็อาจจะได้ว่า echo “{\”ชื่อตัวแปร1\”:\”ค่าตัวแปร1\”,\”ชื่อตัวแปร2\”:\”ค่าตัวแปร2\”}”; อะไรอย่างนี้ แต่ว่า จริงๆแล้ว PHPรุ่นใหม่ๆ จะมีฟังก์ชั่นให้คือ json_encode() รายละเอียดไปดูใน PHP.NET เอาเองนะ แต่ถ้าจะเอาคร่าวๆก็พอจะได้ว่า มันแปลง Array ให้อยู่ในรูปของ JSON ดังนั้น เราก็สร้าง Array เอาค่าใส่ไปใน Array แล้วก็ Encode ซะ ก็ใช้ได้แล้ว

ลองทำโปรแกรมง่ายๆละกัน ให้ใส่ชื่อ และนามสกุล จากนั้น โปรแกรมก็แยกชื่อ กับนามสกุลออกจากกัน มาแสดงคนละบรรทัด จะได้เห็นวิธีใช้ JSON อย่างชัดเจน
—-
index.php คัดลอกจากตัวอย่างคราวที่แล้ว มาเติมจุดแสดงผลเพิ่มอีกจุด ถ้าจะก๊อบไปลองอย่าลืมเซฟเป็น utf8 นะ ไม่งั้นมันจะเป็นตัวยึกยือ
—-


<?php echo date("m/d/Y H:i:s"); ?>
<p>กรุณาป้อน ชื่อ - สกุล <input id="aaa" name="aaa" type="text" data-constant="test" autofocus /></p>
<p>ชื่อของคุณคือ <div id="bbb"></div></p>
<p>และนามกุลของคุณก็คือ <div id="ccc"></div></p>
<script src="https://code.jquery.com/jquery-3.2.1.js">
</script><script src="ajax.js"></script>


ajax.js มาจากตัวอย่างที่แล้ว แต่เพิ่มเติมนิดหน่อยเพื่อใช้ JSON


$('#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.nm);
         $('#ccc').html(data.snm);
      },'json');
   }
});


ajax.php จากตัวอย่างที่แล้วเช่นกัน แต่เพิ่มขั้นตอนประมวลผลและส่งผลลัพท์แบบ JSON


<?php

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

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

#ตรงนี้แยกชื่อสกุลออกจากกัน
$array1 = explode(" ",$kk1);

#ตรงนี้ส่งผลลัพท์กลับไปยัง ajax.js
#ถ้าเป็น PHP 5 ขึ้นไป มี json_encode แล้ว ก็อาจใช้  echo json_encode($array1); ก็ได้ แต่ไปแก้ ajax.js ให้ใช้วิธีอ่านแบบไม่มีชื่อตัวแปร
#แต่ถ้าส่งเองไม่ใช้ฟังก์ชั่น ก็ทำได้ดังนี้ 
echo "{\"nm\":\"$array1[0]\",\"snm\":\"$array1[1]\"}";

?>

จบนะครับ

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 18 access attempts in the last 7 days.