การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON()

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
ฐานข้อมูล.clone ไฟล์ json getjson jquery php

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ฐานข้อมูล.clone ไฟล์ json getjson jquery php

ดูแล้ว 74,383 ครั้ง


ตัวอย่างต่อไปนี้เป็นสร้างไฟล์ json จากฐานข้อมูลด้วย php โดยคร้างสร้างฐานข้อมูลตัวอย่างเป็นฐานข้อมูลจังหวัด
ในประเทศไทย ชื่อ province_th ประกอบด้วย ฟิลด์ province_id และ province_name

แก้ไข 27-02-2017 รองรับ mysqli


โค้ดไฟล์ dbconnect.php
 

1
2
3
4
5
6
7
8
9
10
11
<?php 
$mysqli = new mysqli("localhost", "root","","test"); 
/* check connection */
if ($mysqli->connect_errno) { 
    printf("Connect failed: %s\n", $mysqli->connect_error); 
    exit(); 
} 
if(!$mysqli->set_charset("utf8")) { 
    printf("Error loading character set utf8: %s\n", $mysqli->error); 
    exit(); 
}


โค้ดไฟล์ gen_json.php
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
header("Content-type:application/json; charset=UTF-8");   
header("Cache-Control: no-store, no-cache, must-revalidate");        
header("Cache-Control: post-check=0, pre-check=0", false);
require_once("inc/dbconnect.php");
$sql = "
SELECT * FROM province_th WHERE 1 ORDER BY province_id
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "province_id" => $row['province_id'],
            "province_name" => $row['province_name']
        );
    }
}
// แปลง array เป็นรูปแบบ json string 
if(isset($json_data)){ 
    $json= json_encode($json_data);   
    if(isset($_GET['callback']) && $_GET['callback']!=""){   
    echo $_GET['callback']."(".$json.");";       
    }else{   
    echo $json;   
    }   
}
?>


การใช้งานด้วย jQuery getJSON() ฟังก์ชัน
อ่านวิธีการใช้งานของฟังก์ชั getJSON() ได้ด้วยตัวเองที่
http://api.jquery.com/jQuery.getJSON/

โค้ดไฟล์  use_jsondata.php
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
 
<body>
 
<p id="showData"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     $.getJSON("gen_json.php",function(data){
         if(data!=null && data.length>0){ // ถ้ามีข้อมูล
             // เราสามารถเลือกข้อมูลบ้างส่วนมาแสดงได้
             $("#showData").html(data[0].province_name);
             // เราสามารถวนลูปแสดงข้อมูล json ได้ ด้วย $.each() ฟังก์ขัน
             $.each(data,function(i,k){
                 $("#showData").append(data[i].province_name+"<br>");
             });
         }
     });
});
</script>
</body>
</html>

 



   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 25-10-2017


สร้าง json ไฟล์ รองรับการกรองข้อมูล

 
ในกรณีที่เราจำเป็นต้องการใช้งาน json ไฟล์ร่วมกับ ajax โดยมีเงื่อนการแสดงข้อมูลตามค่าที่ถูกส่ง
มา ตัวอย่างเช่น เราต้องการสร้างไฟล์ json ของรายชื่อจังหวัดในประเทศไทย โดยถ้ามีการส่ง id จังหวัด
ที่ต้องการมา ให้ส่งค่าข้อมูลของจังหวัดนั้นกลับไป สามารถปรับโค้ดได้เป็นดังนี้
 
โค้ดไฟล์ gen_json.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
header("Content-type:application/json; charset=UTF-8");   
header("Cache-Control: no-store, no-cache, must-revalidate");        
header("Cache-Control: post-check=0, pre-check=0", false);
require_once("inc/dbconnect.php");
$json_data = array();
if(isset($_GET['id']) && $_GET['id']!=""){
    $sql = "
    SELECT * FROM tbl_provinces WHERE province_id='".$_GET['id']."'
    ";
}else{
    $sql = "
    SELECT * FROM tbl_provinces WHERE 1 ORDER BY province_id
    ";
}
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "province_id" => $row['province_id'],
            "province_name" => $row['province_name'],
            "province_name_eng" => $row['province_name_eng'],           
        );
    }
}
// แปลง array เป็นรูปแบบ json string 
if(isset($json_data)){ 
    $json= json_encode($json_data);   
    if(isset($_GET['callback']) && $_GET['callback']!=""){   
    echo $_GET['callback']."(".$json.");";       
    }else{   
    echo $json;   
    }   
}
?>
 
มาลองเรียกใช้และประยุกต์ กับ ajax ของ jquery ดึงข้อมูลมาแสดง แบบที่ 1
เงื่อนไข คือ ถ้าเรากรอก id ของจังหวัด ก็จะส่งค่า id นั้นไปที่ไฟล์ gen_json.php แล้วส่งกลับ
ข้อมูล JSON string ที่ตรงกับค่า id กลับมา ใช้งาน โดยเอามาแสดงใน input text ตามตัวอย่าง
โค้ดต่อไปนี้
 
ไฟล์ demo.php
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
 
<pre id="place_show_return">
 
</pre>
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50" align="center">ID</td>
    <td align="center">Name Thai</td>
    <td align="center">Name Eng</td>
  </tr>
  <tr>
    <td align="center"><input type="text" name="inputdata1" id="inputdata1"></td>
    <td align="center"><input type="text" name="inputdata2" id="inputdata2"></td>
    <td align="center"><input type="text" name="inputdata3" id="inputdata3"></td>
  </tr>
</table>
<br>
ทดสอบโดยการเปลี่ยนค่าในช่อง ID เป็นเลข 1 - 77 หลังเปลี่ยนแปลงค่า ข้อมูลอื่นๆ ก็จถูกนำมาแสดง
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
     
    $("#inputdata1").on("change",function(){
        var data_1 = $(this).val();
        $.getJSON("gen_json.php?id="+data_1,function(data){ // คืนค่าตัวแปร data เป็น json object
            $("#place_show_return").html(JSON.stringify(data));
            if(data!=null && data.length>0){ // ถ้ามีข้อมูล
                $("#inputdata2").val(data[0].province_name);
                $("#inputdata3").val(data[0].province_name_eng);
            }
        });
    });
     
});
</script>
</body>
</html>
 
วิธีข้างต้นนี้เหมาะกับ การนำข้อมูลมาแสดงในปริมาณไม่มาก หรือจำนวนไม่มาก เราสามารถ
ใช้ id ของ element มาอ้างอืงได้ อย่างในตัวอย่าง เราใช้ id ชื่อ inputdata2 และ inputdata3 
มารับค่าของ json object ที่เราเรียกใช้าน $.getJSON() 
 
 
ต่อไป เป็นแนวทางประยุกต์ ร่วมกับ การ clone() โดยสามารถเพิ่มแถวรายการได้
สำหรับรายการที่มี form element จำนวนมากๆ การใช้ id ในการอ้างอิงจะไม่เหมาะ ให้เปลี่ยนมาใช้
css class มาใช้ในการอ้างอิงแทน และกำหนดชื่อของ element ให้เป็นแบบ array โดยเพิ่ม [] 
เข้าไปในชื่อ ดูไฟล์ตัวอย่างด้านล่างประกอบ
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
 
<pre id="place_show_return">
 
</pre>
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="500" border="0" cellspacing="3" cellpadding="0">
  <tr>
    <td width="50" align="center">ID</td>
    <td align="center">Name Thai</td>
    <td align="center">Name Eng</td>
  </tr>
  <tr class="firstTr">
    <td align="center"><input type="text" name="inputdata1[]" class="css_input_col1"></td>
    <td align="center"><input type="text" name="inputdata2[]" class="css_input_col2"></td>
    <td align="center"><input type="text" name="inputdata3[]" class="css_input_col3"></td>
  </tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button> 
    &nbsp;
    <button id="removeRow" type="button">-</button>
    &nbsp;
    &nbsp;
    &nbsp;
    <input type="submit" name="Submit" id="Submit" value="Submit" /></td>
  </tr>
</table>
<br>
ทดสอบโดยการเปลี่ยนค่าในช่อง ID เป็นเลข 1 - 77 หลังเปลี่ยนแปลงค่า ข้อมูลอื่นๆ ก็จถูกนำมาแสดง
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
 
    $("#addRow").click(function(){
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
        $(".firstTr:eq(0)").clone(true)
        .find("input").attr("value","").end()
        .appendTo($("#myTbl"));
    });
    $("#removeRow").click(function(){
        // // ส่วนสำหรับการลบ
        if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
            $("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
        }else{
            // เหลือ 1 รายการลบไม่ได้
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
        }
    });
     
    $(".css_input_col1").on("change",function(){
        var data_1 = $(this).val();
        var indexThis = $(".css_input_col1").index(this);
        $.getJSON("gen_json.php?id="+data_1,function(data){ // คืนค่าตัวแปร data เป็น json object
            $("#place_show_return").html(JSON.stringify(data));
            if(data!=null && data.length>0){ // ถ้ามีข้อมูล
                $(".css_input_col2").eq(indexThis).val(data[0].province_name);
                $(".css_input_col3").eq(indexThis).val(data[0].province_name_eng);
            }
        });
    });
     
});
</script>
</body>
</html>
 
 
ดูตัวอย่างได้ที่ DEMO ด้านท้ายบทความ
 
 


   เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 28-10-2017


สร้างรายการตัวเลือกใน Select Option ด้วยข้อมูลจาก JSON ไฟล์

 
ตัวอย่างโค้ดต่อไปนี้ จะเป็นแนวทาง กรณีเราต้องการข้อมูลจากอีกตาราง มาสร้างเป็นตัวเลือก select option
ของฟอร์มบันทึกข้อมูล สมมติเช่น ฟอร์มบันทึกข้อมูลของเรา ต้องการจะนำ id ของจังหวัด มาจัดเก็บด้วย
จึงจำเป็นต้องมีรายการ select option ของรายชื่อจังหวัดมาแสดง พร้อมเก็บค่าเป็น id ของจังหวัด
การประยุกต์ต่อไปนี้ จะมีสองรูปแบบคือ แบบที่รองรับการแก้ไข และแบบที่แสดงปกติ 
 
โค้ดตัวอย่าง
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
 
<pre id="place_show_return">
 
</pre>
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150" align="center">Select Province 1</td>
    <td align="center">
    <div class="form-group row">
    <div class="col-sm-6">
    <select class="form-control" name="province_id" id="province_id">
        <option value="">เลือกจังหวัด</option>
    </select>
    </div>
    <div class="col-sm-6 text-left">
    <button type="button" class="btn btn-sm" onClick="optionProvince('#province_id',null);">แก้ไข</button>
    </div>
    </div>
    </td>
  </tr>
  <tr>
    <td width="150" align="center">Select Province 2</td>
    <td align="center">
    <div class="form-group row">
    <div class="col-sm-12">
    <select class="form-control" name="province_id2" id="province_id2">
        <option value="">เลือกจังหวัด</option>
    </select>
    </div>
    </div>
    </td>
  </tr> 
</table>
<br>
รายการ option ตัวเลือกของรายชื่อจังหวัด จะถูกดึงจากไฟล์ json มาแสดง
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
var optionProvince;
$(function(){
     
    optionProvince = function(obj,id){
        $(obj).find("option:gt(0)").remove();
        var htmlOption = "";
        var queryStr ="";
        if(id!=null){
            queryStr="?id="+id;
        }
        $.getJSON("gen_json.php"+queryStr,function(data){ // คืนค่าตัวแปร data เป็น json object
            if(data!=null && data.length>0){ // ถ้ามีข้อมูล
                $.each(data,function(i,k){
                    htmlOption+='<option value="'+data[i].province_id+'">'+data[i].province_name+'</option>';
                });
                $(obj).find("option").after(htmlOption);
                if(id!=null){
                    $(obj).val(id);
                }
            }
        });        
    }
    // ตัวอย่างตัวเลือกที่ 1
    optionProvince('#province_id',1); // แสดงรายการเฉพาะที่เลือก
    // ตัวอย่างตัวเลือกที่ 2   
    optionProvince('#province_id2',null); // แสดงรายการทั้งหมด
     
//  รูปแบบการใช้งาน optionProvince(selector เช่น #province_id,id ข้อมูลที่เลือก ถ้าไม่มี ให้เป็น null);
 
     
});
</script>
</body>
</html>
 
ตัวอย่างดูได้ที่ DEMO 3






กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: ฐานข้อมูล.clone php jquery getjson ไฟล์ json







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ