Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,028

HOME > PHP > PHP Forum > จะดึงค่าจาก Database มาใส่ในตัวแปล var (javascript) ยังไงครับ



 

จะดึงค่าจาก Database มาใส่ในตัวแปล var (javascript) ยังไงครับ

 



Topic : 129618



โพสกระทู้ ( 0 )
บทความ ( 0 )



สถานะออฟไลน์




นี่คือตัวแปลที่ผมต้องการดึงค่าจาก database มาใส่ ซึ่งปัจจุบันผมยังใส่ข้อมูลดิบอยู่

Code (JavaScript)
<script type="text/javascript">
var arr_Destination = [
	{id:1,title: 'บริษัท กรีนไพน์ จำกัด',lat: 12.570474,   lng: 99.957825,alink:'https://maps.google.com?saddr=Current+Location&daddr=ทีพีไอ+คอนกรีต+หน่วยผลิตหัวหิน'},
    {id:2,title: 'ทีพีไอ คอนกรีต หน่วยผลิตหัวหิน',lat: 12.6755735,   lng: 99.9487977,alink:'https://maps.google.com?saddr=Current+Location&daddr=ทีพีไอ+คอนกรีต+หน่วยผลิตหัวหิน'},
    {id:3,title: 'บริษัทรุ่งทิพย์คอนกรีต จำกัด',lat: 12.3740072, lng: 99.8326259,alink:'https://maps.google.com?saddr=Current+Location&daddr=บริษัทรุ่งทิพย์คอนกรีต+จำกัด'},
    {id:4,title: 'ห้างหุ้นส่วนจำกัด สหสยามคอนกรีต',lat: 12.4343182,   lng: 99.9467043,alink:'https://maps.google.com?saddr=Current+Location&daddr=ห้างหุ้นส่วนจำกัด+สหสยามคอนกรีต'},
	{id:5,title: 'บริษัท ปูนซีเมนต์นครหลวง จำกัด(มหาชน)',lat: 11.273043, lng: 99.488970,alink:'https://maps.google.com?saddr=Current+Location&daddr=11.273043, 99.488970'},
	{id:6,title: 'บริษัทพงศ์พัฒนาคอนกรีต จำกัด',lat: 11.1989883,   lng: 99.5036602,alink:'https://maps.google.com?saddr=Current+Location&daddr=บริษัทพงศ์พัฒนาคอนกรีต+จำกัด'},
	{id:7,title: 'โรงงานคอนกรีตผสมเสร็จซีแพค',lat: 12.533803, lng: 99.948434,alink:'https://maps.google.com?saddr=Current+Location&daddr=12.533803, 99.948434'},
	{id:8,title: 'ห้างหุ้นส่วนจำกัด มหาทรัพย์ซีเมนต์ เทรดดิ้ง',lat: 12.5866329,   lng: 99.8632228,alink:'https://maps.google.com?saddr=Current+Location&daddr=ห้างหุ้นส่วนจำกัด+มหาทรัพย์ซีเมนต์+เทรดดิ้ง'}
];


ต่อมาผมลองใช้ ajax ซึ่งไม่รู้ว่าใช้ถูกไหม

Database


ไฟล์ genMarker.php

Code (PHP)
<?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("admin/inc/dbconnect.php");
$json_data = array();
$sql = "
SELECT * FROM map WHERE 1 ORDER BY id_map
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "id_map" => $row['id_map'],
            "title_map" => $row['title_map'],
            "lat_map" => $row['lat_map'],
            "lng_map" => $row['lng_map'],
			"alink_map" => $row['alink_map']                    
        );
    }
}
// แปลง 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;    
    }    
}
?>


ไฟล์ index.php

Code (PHP)
<!DOCTYPE html>
<html>
<head>
<title><?php include('../title.php') ?></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  <link rel="stylesheet" href="http://v4-alpha.getbootstrap.com/examples/sticky-footer/sticky-footer.css">

     <!-- FONTAWESOME STYLES-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
    
     <!-- GOOGLE FONTS-->
   <link href='https://fonts.googleapis.com/css?family=Kanit:400,300&subset=thai,latin' rel='stylesheet' type='text/css'>
<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
	
      }
      /* Optional: Makes the sample page fill the window. */
  
     
    </style>
     <style type="text/css">
    html { height: 100% }
    body { 
        height:100%;
        margin:0;padding:0;
        font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
        font-size:12px;
    }
 
#comments {background:#fff}
iframe {width:100%; height:250px;border:0;}
#comment-wrap {background:#fff;position:relative}
#comments #comment-wrap{display:none;z-index:5;padding:10px}
#comments:hover #comment-wrap {display:block}
    </style>
    
    
    <style type="text/css">  
 
#map_canvas {   
    
    height:500px;  
    margin:auto;  
    /*  margin-top:100px;*/ 
	li01 a {
    font-size:18px;
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
.li01  {
    font-size:18px;
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
.li02 {
     background-color: #555;
    color: white;
}

</style>  
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;

}

#customers tr:hover {background-color: #ddd;

}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>
  <style type="text/css">
  a:link,a:visited {
   color: #ff6600;
  
   text-decoration: none;
   target-new: none;
   
  }
  a:hover {
   color: red;

   text-decoration: none;
   target-new: none;
  }
 </style>
    
    
    
    <script>hover = function() {
    if (!document.body.currentStyle) return;
    var DIVcomments = document.getElementById('comments');
    var DIVcomment_wrap = document.getElementById('comment-wrap');
    DIVcomments.onmouseover = function() {
        DIVcomment_wrap.style.display = 'block';
    }
    DIVcomments.onmouseout = function() {
        DIVcomment_wrap.style.display = 'none';
    }
}
window.onload = hover;</script>
    
    <style type="text/css">  
body {
  font-family: 'Kanit', sans-serif;
}
h2 {
  font-family: 'Kanit', sans-serif;
}
</style> 
    <link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body><div style="display:block">
<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="../index.php"><span class="glyphicon glyphicon-modal-window"></span>&nbsp;หน้าแรก</a></li>
      <li><a href="../frontend/agent.php"><span class="glyphicon glyphicon-globe"></span>&nbsp;ตัวแทนทั้งหมด</a></li>
      <li><a href="../frontend/contact.php"><span class="glyphicon glyphicon-phone-alt"></span>&nbsp;สินค้าทั้งหมด</a></li>
      <li><a href="../map/index.php"><span class="glyphicon glyphicon-globe"></span>&nbsp;แผนที่</a></li>
    </ul>
    <div>  </div>
  </div>
  
    <table width="100%" border="0" >
   <tr>
     <td width="25%"valign="top" style="background-color:#f1f1f1;">
     <li01 style="text-align:center;">
       <table width="100%" border="0">
         <tr>
           <td><div align="center" style="background-color:#4caf50; color:#FFFFFF; font-size:16px; padding: 5px;">คู่มือ</div></td>
         </tr>
         <tr>
           <td><div align="center" style="background-color:#555555; color:#FFFFFF; font-size:16px; padding: 5px;">ลากไอคอนสีเหลือง<img src="img/male-2.png" alt=""> ไปยังตำแหน่งของท่าน<br>
             และโปรแกรมคำนวนระยะทางให้ท่าน<br>
             จากนั้นเลือกผลลัพที่แสดงที่ตัวเลือกด้านล่างนี้</div></td>
         </tr>
       </table>
       </li01>
  		<li02 style="text-align:center;font-size:16px;"></li02>
	   <table id="customers">
    <thead>
        <tr class="active">
        
            <th align="left" width="75%">ชื่อสถานที่</th>
            <th align="right" width="25%">ระยะทาง</th>
        </tr>
    </thead>
    <tbody id="placeData">
    </tbody>
</table>
      <p>&nbsp;</p></td>
     <td width="75%"><div id="map_canvas" style="width:100%;height:1000px;"></div> </td>
   </tr>
 </table>
<br>
<br>
<div class="container" style="width:100%;"></div>   
</div>
  
  
 
<script src="//unpkg.com/[email protected]"></script>
<script type="text/javascript">
$.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
        method: "POST",
        dataType: "json",
        success:function(data){
            if(data && typeof data == 'object'){
                $.each(data,function(k,dataValue){
                    var id_map=dataValue.id_map;// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var title_map=dataValue.title_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                    var lat_map=dataValue.lat_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                    var lng_map=dataValue.lng_map;
					var alink_map=dataValue.alink_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                 
                    });
                }); // end loop data
            } // end check data 
        }   // end success 
    });    // End ajax function 
	
	
var arr_Destination = [
	{id:id_map, title:title_map, lat:lat_map, lng:lng_map, alink:alink_map},
];
var sort_arr_Destination = [];
var iconLetter = ['a','b','c','d'];
var place_Marker = [];
var pos;
var posPlace;
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
var my_Marker;  // กำหนดตัวแปรเก็บ marker ตำแหน่งปัจจุบัน หรือที่ระบุ  
var service;
var origins = [];
var destinations = [];
function initialize() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
   
   service = new GGM.DistanceMatrixService();
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี    
    if(navigator.geolocation){    
             
            // หาตำแหน่งปัจจุบันโดยใช้ getCurrentPosition เรียกตำแหน่งครั้งแรกครั้งเดียวเมื่อเปิดมาหน้าแผนที่
            navigator.geolocation.getCurrentPosition(function(position){    
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน           
                 
                // สรัาง LatLng ตำแหน่ง สำหรับ google map  
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);    
				origins = [];
				origins.push(pos);             
                 
                // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
                var my_DivObj=$("#map_canvas")[0];   
                 
                // กำหนด Option ของแผนที่  
                var myOptions = {  
                    zoom: 12, // กำหนดขนาดการ zoom  
                    center: pos , // กำหนดจุดกึ่งกลาง  เป็นจุดที่เราอยู่ปัจจุบัน
                    mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่  
                    mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่  
                        position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง  
                        style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style   
                    }  
                };  
          
                map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map                      
               
               my_Marker = new GGM.Marker({ // สร้างตัว marker  
                    position: pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
					icon:"//www.ninenik.com/demo/google_map/images/male-2.png",  
                    draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้  
                    title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                });                  
                 
				for( i = 0;i<arr_Destination.length;i++){	
					posPlace = new GGM.LatLng(arr_Destination[i].lat,arr_Destination[i].lng);     
					destinations.push(posPlace);

					place_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
						position: posPlace,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
						animation: google.maps.Animation.DROP,
						map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
						label:arr_Destination[i].title
					});       	
				}		
				
				service.getDistanceMatrix(
				  {
					origins: origins,
					destinations: destinations,
					travelMode: 'DRIVING',
					avoidHighways: true,
					avoidTolls: true,
				  }, callback);						 
				 
				 
				// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
				GGM.event.addListener(my_Marker, 'dragend', function() {
					var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
					map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker       	
					origins = [];
					origins.push(my_Point);     
						
					service.getDistanceMatrix(
					  {
						origins: origins,
						destinations: destinations,
						travelMode: 'DRIVING',
						avoidHighways: true,
						avoidTolls: true,
					  }, callback);							 

				});     
								 
                // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
                GGM.event.addListener(map, "zoom_changed", function() {  
                    $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value    
                });                  
                 
            },function() {    
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
            });    
         
            // ให้อัพเดทตำแหน่งในแผนที่อัตโนมัติ โดยใช้งาน watchPosition
            // ค่าตำแหน่งจะได้มาเมื่อมีการส่งค่าตำแหน่งที่ถูกต้องกลับมา
            navigator.geolocation.watchPosition(function(position){    
  
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน  
                                
                // สรัาง LatLng ตำแหน่งปัจจุบัน watchPosition
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);     
                 orgins = [];
				 origins.push(pos);    
                // ให้ marker เลื่อนไปอยู่ตำแหน่งปัจจุบัน ตามการอัพเดทของตำแหน่งจาก watchPosition
                my_Marker.setPosition(pos);

                map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน  
                map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน                   
       
 
            },function() {    
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
            });    
           
    }else{    
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง    
    }     
 
 
  
}  

function callback(response, status,_) {
	if(status=='OK'){		
//		console.log(arr_Destination);
		$.each(response.rows[0].elements,function(i,elm){
			arr_Destination[i].distanceText = elm.distance.text;
			arr_Destination[i].distanceValue = elm.distance.value;
		});
		sort_arr_Destination = [];
		sort_arr_Destination = $.extend(true,[], arr_Destination);
		sort_arr_Destination.sort(function(a, b) {
			return parseFloat(a.distanceValue) - parseFloat(b.distanceValue);
		});
//		console.log(sort_arr_Destination);
		$("#placeData").html('');
		$.each(sort_arr_Destination,function(i,dest){
			var htmlTr = '<tr><td><a href="'+arr_Destination[i].alink+'" target="_blank">'+dest.title+'</a></td><td>'+dest.distanceText+'</td></tr>';
			$("#placeData").append(htmlTr);			
	//		console.log(dest);
		});		
	}
}
$(function(){  
    // โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว  
    // ค่าตัวแปร ที่ส่งไปในไฟล์ google map api  
    // v=3.2&sensor=false&language=th&callback=initialize  
    //  v เวอร์ชัน่ 3.2  
    //  sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false  
    //  language ภาษา th ,en เป็นต้น  
    //  callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize  
    $("<script/>", {  
      "type": "text/javascript",  
      src: "//maps.google.com/maps/api/js?v=3.2&key=AIzaSyCSTujeM64MyA3QnjwKF_SnXmaiyTItWOM&sensor=false&language=th&callback=initialize" 
    }).appendTo("body");      
});
 </script>
</body>
</html>



สิ่งที่ผมต้องการคือให้ไอ้ ตัวแปล
var arr_Destination = [
{id:id_map, title:title_map, lat:lat_map, lng:lng_map, alink:alink_map},
];

ดึงข้อมูลจาก database มาแสดงแล้ว loop เท่านั้นเองครับ แต่ทำไม่ได้ ฮือๆๆ



Tag : PHP, HTML5, JavaScript, Ajax, jQuery, JAVA







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2017-12-01 01:47:52 By : zzz12345 View : 8090 Reply : 5
 

 

No. 1



โพสกระทู้ ( 1,521 )
บทความ ( 2 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

ลองดูจากนี่นะไหนๆก็ใช้ jQuery แล้ว jQuery getJSON save result into variable








ประวัติการแก้ไข
2017-12-01 09:12:24
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-12-01 09:11:37 By : Krungsri
 


 

No. 2



โพสกระทู้ ( 2,249 )
บทความ ( 5 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook Hi5 Blogger

ถ้าระบบที่เราเขียนเป็นไฟล์ php อยู่แล้ว ใน javascript เราใส่ตัวแปร php ไปได้เลยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-12-02 04:17:37 By : Manussawin
 

 

No. 3



โพสกระทู้ ( 9,559 )
บทความ ( 2 )



สถานะออฟไลน์


หลังจากรับค่า ajax แล้วต้องทำอะไร เขียนเป็น function เอาไว้


Code (JavaScript)
function after_ajax( obj){
    alert(obj.id) // จะทำอะไรก็ว่ากันไป
}
$.ajax({
	url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
	method: "POST",
	dataType: "json",
	success:function(data){
		if(data && typeof data == 'object'){
			$.each(data,function(k,dataValue){
				after_ajax(dataValue); // เรียกใช้ function จากที่นี่				
			});// end loop data
		} // end check data
	}   // end success
});    // End ajax function




ประวัติการแก้ไข
2017-12-02 08:37:50
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-12-02 08:37:00 By : Chaidhanan
 


 

No. 4



โพสกระทู้ ( 0 )
บทความ ( 0 )



สถานะออฟไลน์


ยังไม่ได้เลยครับ
ผมทำ java ที่คุณ Chaidhanan แล้วยังไม่ผ่าน เลยลองดึงค่าจาก php มา

Code (PHP)
 <script type="text/javascript">
var xrr = [{id:<?php echo $row_Recordset1['id_map']; ?>,title:'<?php echo $row_Recordset1['title_map']; ?>',lat: <?php echo $row_Recordset1['lat_map']; ?>,   lng: <?php echo $row_Recordset1['lng_map']; ?>,alink:' <?php echo $row_Recordset1['alink_map']; ?>'}];
 </script> 
<script type="text/javascript">
var arr_Destination = xrr;
</script> 


ปรากฏว่าข้อมูลมาครับแต่มาแถวเดียว
อันนี้ไฟล์โปรเจคครับ >>> goo.gl/kGzUaH <<<<

อันนี้ฐานข้อมูล
Code (SQL)
ฐานข้อมูล: `cement_project`
-- 

-- --------------------------------------------------------

-- 
-- โครงสร้างตาราง `map`
-- 

CREATE TABLE `map` (
  `id_map` int(11) NOT NULL auto_increment,
  `title_map` varchar(255) NOT NULL,
  `lat_map` varchar(255) NOT NULL,
  `lng_map` varchar(255) NOT NULL,
  `alink_map` varchar(255) NOT NULL,
  PRIMARY KEY  (`id_map`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=11 ;

-- 
-- dump ตาราง `map`
-- 

INSERT INTO `map` VALUES (3, 'บริษัท กรีนไพน์ จำกัด', '12.570474', '99.957825', 'https://maps.google.com?saddr=Current+Location&daddr=ทีพีไอ+คอนกรีต+หน่วยผลิตหัวหิน');
INSERT INTO `map` VALUES (4, 'ทีพีไอ คอนกรีต หน่วยผลิตหัวหิน', '12.6755735', '99.9487977', 'https://maps.google.com?saddr=Current+Location&daddr=ทีพีไอ+คอนกรีต+หน่วยผลิตหัวหิน');
INSERT INTO `map` VALUES (5, 'บริษัทรุ่งทิพย์คอนกรีต จำกัด', '12.3740072', '99.8326259', 'https://maps.google.com?saddr=Current+Location&daddr=บริษัทรุ่งทิพย์คอนกรีต+จำกัด');
INSERT INTO `map` VALUES (6, 'ห้างหุ้นส่วนจำกัด สหสยามคอนกรีต', '12.4343182', '99.9467043', 'https://maps.google.com?saddr=Current+Location&daddr=ห้างหุ้นส่วนจำกัด+สหสยามคอนกรีต');
INSERT INTO `map` VALUES (7, 'บริษัท ปูนซีเมนต์นครหลวง จำกัด(มหาชน)', '11.273043', '99.488970', 'https://maps.google.com?saddr=Current+Location&daddr=11.273043, 99.488970');
INSERT INTO `map` VALUES (8, 'บริษัทพงศ์พัฒนาคอนกรีต จำกัด', '11.1989883', '99.5036602', 'https://maps.google.com?saddr=Current+Location&daddr=บริษัทพงศ์พัฒนาคอนกรีต+จำกัด');
INSERT INTO `map` VALUES (9, 'โรงงานคอนกรีตผสมเสร็จซีแพค', '12.533803', '99.948434', 'https://maps.google.com?saddr=Current+Location&daddr=12.533803, 99.948434');
INSERT INTO `map` VALUES (10, 'ห้างหุ้นส่วนจำกัด มหาทรัพย์ซีเมนต์ เทรดดิ้ง', '12.5866329', '99.8632228', 'https://maps.google.com?saddr=Current+Location&daddr=ห้างหุ้นส่วนจำกัด+มหาทรัพย์ซีเมนต์+เทรดดิ้ง');


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-12-03 23:40:31 By : zzz12345
 


 

No. 5



โพสกระทู้ ( 9,559 )
บทความ ( 2 )



สถานะออฟไลน์


ลองดูเป็นตัวอย่าง
Code (PHP)
<?php
if(isset($_GET['json'])){
	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("admin/inc/dbconnect.php");
	$json_data = array();
	$sql = "
	SELECT id_map id, title_map title, lat_map lat, alink_map alink 
	FROM map ORDER BY id_map
	";
	$result = $mysqli->query($sql);
	while($row = $result->fetch_assoc()){
		$json_data[] = $row;
	}
	// แปลง array เป็นรูปแบบ json string  
	if(count($json_data)){  
		$json= json_encode($json_data);    
		if(isset($_GET['callback']) && $_GET['callback']!=""){    
			echo $_GET['callback']."(".$json.");";        
		}else{    
			echo $json;    
		}		
	}
	exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>test map2</title>
<meta charset="utf-8">
<script src="jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
	$.ajax({ url: "genMarker.php?json=1", dataType:'json'})
	.done(function(json_data){
		$(json_data).each(function(idx, ro){
			$('<tr>' +
				'<td>'+ro.id+'</td>' +
				'<td>'+ro.title+'</td>' +
				'<td>'+ro.lat+'</td>' +
				'<td>'+ro.alink+'</td>' +
			'</tr>').appendTo('table');
		})        
    });
});
</script>
</head>
<body>
<table border=1 >
<tr>
	<th>id</th>
	<th>title</th>
	<th>lat</th>
	<th>alink</th>
</tr>
</table>
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-12-04 09:45:59 By : Chaidhanan
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : จะดึงค่าจาก Database มาใส่ในตัวแปล var (javascript) ยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่