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]\"}";

?>

จบนะครับ

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

?>

แค่นี้แหละ

เตรียมพร้อมทำมิชชั่นไฟนอล 11

November 15th, 2016

สร้างตัวใหม่ อัพเลเวลจน99แล้ว พร้อมแล้วล่ะที่จะเริ่มทำมิชชั่น
ก็คงต้องเริ่มจากมิชชั่นของวินดัสก่อน เอาให้ถึงแรงค์10เลย แล้วค่อยต่อด้วยมิชชั่นของซิลลาร์ท

ไฟนอล11 ที่กลับมาเล่นคราวนี้ เป้าหมายคือ สรุปเนื้อหาคร่าวๆในแต่ละมิชชั่นนั่นเอง

ตัวละครที่เล่น
1- Lilan RDM/BLM เมจสายรุก /ฮีลเลอร์ตัวสำรอง
2- Popcorn PLD/WAR แทงค์ สายอึด / ฮีลตัวเองได้ถ้าจำเป็น
3- Apolon DRG/RDM ดาเมจดีลเลอร์ / ฮีลเลอร์ตัวหลัก

มีแค่สามตัวก็น่าจะจบมิชชั่นได้ คิดว่านะ

อัพเดท ไฟนอล 11 ไพรเวทเซิพเวอร์

September 7th, 2016

ให้ดาวน์โหลด
download –> ดาวน์โหลด
จากนั้น
extract and copy ทุกอย่าง ไปห้อง
C:\Program Files (x86)\PlayOnline\SquareEnix\FINAL FANTASY XI

แล้วเรียก Playonline ของจริง กด Check File

ถ้าจำวิธีไม่ได้ ก็ทำตามเวปนี้ เพียงแต่ ไม่ต้องไปลบไฟล์ 0.dat แล้วนะ ข้ามขั้นตอนไปที่ Playonline เลย
วิธีอัพเดทด้วย Play Online

Distant World

June 2nd, 2016

« Previous Entries  

 

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

Business Broker