使用AJAX從SQL獲取信息並放置在表

我想創建一個表2x2表，第一行標籤和第二個與我從我的sql表中獲取的信息。我想在左側顯示業務的名稱和右側的信息。我想保留它爲2x2，所以按鈕樣式左側會有多個名稱，點擊時會在右側顯示相關信息。所以它會看起來像這樣。使用AJAX從SQL獲取信息並放置在表

|--------------------|---------------------| 
|  NAME   |  INFO   | 
|--------------------|---------------------| 
| BusinessName1 |  their info | 
| BusinessName2 |      | 
| BusinessName3 |      | 
|--------------------|---------------------|

的問題是，我希望能夠點擊BUSINESSNAME並顯示其右側的信息。我有AJAX和PHP工作來檢索和顯示businessName，只是不知道如何使BusinessName按鈕工作來顯示右側的相關信息。

存儲信息的表稱爲業務，包含列，名稱和信息。

下面是代碼我迄今獲得的名稱和將其粘貼到表：

Main.php

//script for sending value 'business' to getTable.php. which will return the list of all business 
//names in button form. 

<script type='text/javascript'> 
function showTable(str) 
{ 
    if (str=="") 
    { 
     document.getElementById("txtHint").innerHTML=""; 
     return; 
    } 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
     } 
    } 

xmlhttp.open("GET","getTable.php?q="+str,true); 
xmlhttp.send(); 

} 
</script> 

<?php ob_start(); ?> //using templates 

//menu bar, onclick of button 'Business Basics' will run showTable script and pass value 'business' to it. 
<table width="829" border="1" cellspacing="5" cellpadding="2" align="center"> 
     <tr> 
     <th scope="col" align="center"><button onclick="showTable(this.value)" value="business">  
     Business Basics </button></th> 
     <th scope="col" align="center"><a href="" > Co-working spaces</a></th> 
     <th scope="col" align="center"><a href=""> Events</a></th> 
     <th scope="col" align="center"><a href=""> Entrepreneur organisations</a></th> 
     </tr> 
     <tr> 
     <th scope="col" align="center"><a href=""> Free/Cheap resoucres</a></th> 
     <th scope="col" align="center"><a href=""> Government Grants</a></th> 
     <th scope="col" align="center"><a href=""> Government websites</a></th> 
     <th scope="col" align="center"><a href=""> Internships</a></th> 
     </tr> 
     </table> 

    <h1> Some stuff</h1> 

    //table where the info will be displayed, 'txtHint' is where the business names are being 
    //displayed and 'txtHint2' is where i want the relevant info to be displayed. 

    <table width="100%" width="830" border="1" cellpadding="2" cellspacing="5" align="center"> 
    <tr> 
    <th scope="col" align="center" width="50%"> Pick one </th> 
    <th scope="col" align="center" width="50%"> More Information </th> 
    </tr> 
    <tr> 
    <th scope="col" align="left" width="50%"> <div id="txtHint"><b>Pick a category!</b></div></th> 
    <th scope="col" align="left" width="50%"> <div id="txtHint2"><b>more info over here</b></div>  
    </th> 
    </tr> 
    </table>

getTable.php

<?php 

$q=$_GET["q"]; 
$count = 0; 

$con = mysqli_connect('localhost','root','root','bregu'); 
if (!$con) 
    { 
    die('Could not connect: ' . mysqli_error($con)); 
    } 

$result = mysqli_query($con,"SELECT * FROM `".$q."`"); //$q is the value 'business' 

while($row = mysqli_fetch_array($result)) 
{ 
echo '<lo><button value="name" type="submit">'.$row['name'].'</lo><br>'; 
$count++; 
} 
mysqli_close($con); 

?>

這是什麼我到目前爲止。這將返回一個商業名稱列表作爲單獨的按鈕。現在我可以使用一些理論或編碼的幫助，這將允許我點擊公司名稱並在表格右側顯示他們的信息。

來源

2013-07-17 Shadowcake

再添Ajax調用 –

使整個視覺表，你在其他PHP文件祝願，並用ajax調用該文件並使用該響應在主文件中顯示您的表。 – San

@三歲生病嘗試，謝謝。 – Shadowcake

您正試圖獲取像這樣的document.getElementById（「txtHint」）的元素txtHint，但元素的位置在哪裏？因爲它不會找到任何具有此名稱的元素，所以它不起作用。還要確保你在ajax調用中獲得響應。您可以通過使用console.log（xmlhttp.responseText）或alert（xmlhttp.responseText）來檢查。

來源

2013-07-17 07:46:22

感謝您的迴應。 txtHint位於標題Some stuff下的第二個表格中。在第二行。這是部分工作。這就是顯示按鈕及其相關BusinessName的列表。點擊時我想要這些按鈕在txtHint2右側顯示其'行'信息。 – Shadowcake

jQuery的可能會喜歡這個

$(function(){ 
var url=""; 
$("a").click(function(){ 
    $.post(url,{name:encodeURIComponent($(this).attr("href"))},function (data){ 
     $("#txtHint").html(data); 
     }); 
    }); 
});

JS可能

window.onload=function(){ 

var as=document.getElementsByTagName("a"); 
for(i=0;i<as.length;i++){ 
    //alert(as.item(i).href); 
    as.item(i).onclick=function(){ 
     //alert(as.item(i).getAttribute("href")); 
     alert(1); 
        /*ajax post*/ 
     return true; 
    } 
}

}上點擊

來源

2013-07-17 08:26:49 LikeWind

使用AJAX從SQL獲取信息並放置在表

回答

相關問題