สอบถามเรื่องการส่งค่าค่ะ

อยากถามเรื่องการส่งค่า เช่น ?idJob=<? echo $rowname['idJob'];?>

แต่จาก template ตัวอย่าง http://www.templatemo.com/preview/templatemo_412_authentic

มันเป็น <a href="#templatemo-page2"></a>

อยากทราบว่า จะส่งค่าไปยังไง เพราะมันไม่ไป

ลองส่งแบบ <a href="#templatemo-page7?idJob=<? echo $rowname['idJob'];?>"><? echo $rowname['nameJob']; ?></a>   มันนิ่งค่ะ

ขึ้นค่า alert(dataVal); ค่ะ แต่ไม่ขึ้นค่า get ในหน้า index.php#templatemo-page8  อยู่ดีค่ะ

ขึ้นอยู่กับว่าเราเอาค่าไปทำอะไร และรูปแบบโค้ดที่ใช้งาน 
เพราะถ้าเขียนโค้ดผิด แนะนำไปก็ไม่ได้อยู่ดี ลองเอาโค้ดที่เราใช้งานแบบเต็มมาแสดงดู เผื่อแนะนำได้

โค้ดหน้า index.php

<section id="templatemo-page8-text" class="inactive">
<div class="col-sm-4 col-md-4">
<h3>ตำแหน่งงานที่รับสมัคร</h3>
         <div class="navbar-collapse collapse">
                   <ul class="nav navbar-nav">
						  <? $sqlname="SELECT * FROM `job` where status!='0' order by idJob DESC";
				  $queryname=mysql_query($sqlname);
				  while($rowname=mysql_fetch_array($queryname)) {
				  ?>
                    <li><a href="#templatemo-page8" data-value="<? echo $rowname['idJob'];?>"><? echo $rowname['nameJob']; ?></a>  </li>
                    <? } ?>
                </ul>
				
        </div>
</div>
 <div class="col-sm-8 col-md-8">
			<h2 class="text-center">สมัครงาน</h2>
<? 
			$data = $_GET["dataVal"];
		$sqlJob="SELECT * FROM job WHERE idJob = '$data'";
		$qJob=mysql_query($sqlJob);
				while($row=mysql_fetch_array($qJob)){ 
				
 
		echo "<h3>".$row['nameJob']."</h3>";
		echo "<br/><b>รายละเอียดงาน  :  </b>";
} 
?>
</div>
</section>

โค้ดหน้า templatemo_script.js

    $(".nav a").on('click',function(e){
            var dataVal = $(this).attr("data-value");
         $.get("index.php",{  // ส่งค่าข้อมูลแบบ get ตัวที่รับใน php ก็จะใช้เป็น $_GET['dataVal']
             dataVal_send:dataVal  // ส่งค่าตัวเปรชื่อ dataVal_send มีค่าเท่ากับค่า dataVal
         },function(data){ // คืนค่าข้อมูลกลับมาในตัวแปร data
            
             alert(dataVal);  // dataVal ค่าตามตัวแปรด้านบน
         });
     });

  พอเข้าใจแล้วว่าทำไมไม่ได้

การดึงข้อมูลด้วย ajax จะไม่ใช้การส่งค่าแบบโดยตรงไปที่ url แต่เป็นการส่งค่าแบบในลักษณะ background
แนวๆ ทำงานเบื้องหลัง และ url จะไม่มีการส่งค่าไป ที่เราเห็นว่า url เปลี่ยนเพราะรูปบแบการใช้งาน #  หรือที่เรียกว่า  hash

วิธีใช้งานแบบ ajax เราต้องสร้างไฟล์ สำหรับรับค่าและแสดงข้อมูลขึ้นมาไฟล์หนึ่ง เช่น showdata.php

ตัวอย่างโค้ดไฟล์

<?php
session_start();
header("Content-type:text/html; charset=UTF-8");     
header("Cache-Control: no-store, no-cache, must-revalidate");    
header("Cache-Control: post-check=0, pre-check=0", false);    
// ส่วนของการติดต่อฐานข้อมูล
$link=mysql_connect("localhost","root","test");  
mysql_select_db("test");  

if($_GET['dataVal_send']!=""){
    $data = $_GET["dataVal_send"];
    $sqlJob="SELECT * FROM job WHERE idJob = '$data'";
    $qJob=mysql_query($sqlJob);
    while($row=mysql_fetch_array($qJob)){ 
        echo "<h3>".$row['nameJob']."</h3>";
        echo "<br/><b>รายละเอียดงาน  :  </b>";
    }     
}
?>  

ไฟล์ด้านบนเราจะใช้รับค่าที่ส่งไป และก็แสดงค่าพร้อมส่งกลับมาใช้งาน

สำหรับส่วนที่จะแสดงข้อมูล เราจะใช้ div และก็กำหนด id ให้มัน เพื่ออ้างอิง ถ้าตามโค้ดตัวอย่างที่ให้มา ก็จะได้เป็น

<section id="templatemo-page8-text" class="inactive">
<div class="col-sm-4 col-md-4">
<h3>ตำแหน่งงานที่รับสมัคร</h3>
         <div class="navbar-collapse collapse">
                   <ul class="nav navbar-nav">
						  <? $sqlname="SELECT * FROM `job` where status!='0' order by idJob DESC";
				  $queryname=mysql_query($sqlname);
				  while($rowname=mysql_fetch_array($queryname)) {
				  ?>
                    <li><a href="#templatemo-page8" data-value="<? echo $rowname['idJob'];?>"><? echo $rowname['nameJob']; ?></a>  </li>
                    <? } ?>
                </ul>
				
        </div>
</div>
 <div class="col-sm-8 col-md-8">
<h2 class="text-center">สมัครงาน</h2>
<div id="place_show"></div>
</div>
</section>

จะเห็นว่าเรากำหนด div และให้ id ชื่อ place_show เราสร้างตรงนี้ไว้เพื่อรับค่า ข้อมูลที่ได้จากไฟล์ showdata.php

ทีนี้มาดูการส่งค่าแบบ ajax ด้วย jquery 

ดูคำอธิบายในโค้ดได้เลย

$(".nav a").on('click',function(e){
        var dataVal = $(this).attr("data-value");
     $.get("showdata.php",{  // ส่งค่าข้อมูลแบบ get ตัวที่รับใน php ก็จะใช้เป็น $_GET['dataVal']
         dataVal_send:dataVal  // ส่งค่าตัวเปรชื่อ dataVal_send มีค่าเท่ากับค่า dataVal
     },function(data){ // คืนค่าข้อมูลกลับมาในตัวแปร data
        // การทำงานคือ ส่งค่า dataVal_send ไปที่ไฟล์ showdata.php 
         // ในไฟล์ showdata.php ต้องรับด้วยตัวแปร $_GET['dataVal_send']
         // เมื่อทำงานเสร็จแล้ว ค่าจากไฟล์ showdata.php ที่แสดงด้วยคำสั่ง echo
         // จะส่งค่านั้นกลับมาในตัวแปร data ตรงโค้ด function(data)
         // ทีนี้เราจะเอาค่าที่ได้ไปแสดง ใน div id = place_show โดยใช้ jquery
         // ก็จะได้เป็น
         $("div#place_show").html(data); // เอาข้อมูลที่ส่งกลับมา มาแสดงใน div
//         alert(dataVal);  // dataVal ค่าตามตัวแปรด้านบน
     });
 });

หลักการที่อธิบายด้านบนคือการใช้งาน ajax ถ้าเข้าใจแล้วก็สามารถนำไปประยุกต์ได้เยอะขึ้น หากยังไม่เข้าใจดี ต้องพยายามศึกษา
เพราะมีความสำคัญมาก

 ขอบคุณมากนะคะ