2011-07-31 14 views
0
<?php 
    $q=$_GET["q"]; 

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

mysql_select_db("world", $con); 

$sql="SELECT * FROM country WHERE Code = '".$q."'"; 

$result = mysql_query($sql); 

echo "<table border='1'> 
<tr> 

<th>Code</th> 
<th>Name</th> 
<th>Continent</th> 
<th>GNP</th> 
<th>GNPOld</th> 
</tr>"; 




while($row = mysql_fetch_array($result)) 
    { 

    echo "<tr>"; 
    echo "<td>" . $row['Code'] . "</td>"; 
    echo "<td>" . $row['Name'] . "</td>"; 
    echo "<td>" . $row['Continent'] . "</td>"; 
    echo "<td>" . $row['GNP'] . "</td>"; 
    echo "<td>" . $row['GNPOld'] . "</td>"; 
    echo "</tr>"; 
     } 
    echo "</table>"; 

    mysql_close($con); 
    ?> 

上記はPHPであり、以下はHTMLです。私は現在mysqlのサンプルワールドデータベースを作成中です。AJAX-PHP-MySQL生成テーブルの動的Divタグを作成

<html> 
<head> 
<script type="text/javascript"> 
function showUser(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","moviedetail.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 
<table width="100%" border="0"> 
    <tr> 
    <td> 

<select name="Country" onChange="showUser(this.value)"> 
    <option>Select Name</option> 
    <?php 
    mysql_connect('localhost','root','') 
    or die ("could not connect DB"); 
    mysql_select_db('world') 
    or die ("could not connect database"); 
    $query="select code, name from country order by name asc" 
    or die ("query failed"); 
    $result=mysql_query($query); 
    while(list($code, $name)=mysql_fetch_row($result)) { 
     echo "<option value=\"".$code."\">".$name."</option>"; 
    echo "<div id=\"".$code."\">".$name."</div>"; 
    } 
    ?> 
</select> 
</td> 

    <td> 
    <div id="txtHint"><b>Country info will be listed here.</b></div> 

    </td> 
    </tr> 
</table> 
</body> 
</html> 

これはフォームと表示テーブルから同じ名前が付けられます。 コードの私の他のセットがあります: -

<?php 
for (;$i<$nrows;) 
{ 

    #add 1 so that numbers don't start with 0 

     echo"<tr>\n"; 
    for ($j=0;$j<10&&$i<=$nrows;$j++) 
    { 
      $n = $i; 
     $i=$i + 1; 
     $k=$n%30; 

     $row = mysqli_fetch_assoc($result); 
     extract($row); 
     echo "<td> 
     <table> 
     <tr> 
       <td>$n</td>\n 
     </tr>\n 
     <tr> 
      <td>$Name</td>\n 
     </tr>\n 
     <tr>\n 
      <td>$Continent</td>\n 
     </tr>\n 
     <tr>\n 
      <td>$Region</td>\n 
     </tr>\n 
     <tr>\n 
       <td>$SurfaceArea</td>\n 
     </tr>\n 
     <tr>\n 
      <td>$IndepYear</td>\n 
     </tr>\n 
      <tr>\n 
      <td>$GNP</td>\n 
     </tr>\n 
     <tr>\n 
      <td>$k</td>\n 
     </tr>\n 
    </table>\n 


     </td>"; 

     if ($k==0)break 2; 

    } 
    echo"</tr>\n"; 




} 
?>   

とhtmlの関連セクションが

<td><table border="1"> 
    <tr> 
    <td> 


     <?php 
include ("/connections/query.php"); 

$nrows = mysqli_num_rows($result); 
/* Display results in a table */ 
    echo "<table>\n 
    <tr>\n"; 
      $i=1; 
include ("/function/movietable.php"); 


    echo "</tr>\n 
    </table>\n"; 


?> 


    </td> 
    <td>&nbsp;</td> 
    </tr> 
</table></td> 

である私はそれを設計して、いくつかの問題があります。最初の2組のコードのように、上のコードでは空白の列の最後の2組のコードによって生成された各国表(全体)についての詳細を示すマウスオーバーエフェクトが必要です。ページの移動にもかかわらず常に同じ位置に表示されたままにしておきたい。

さらにもう少し簡単な問題があります。上記のように私は30の結果でクエリを停止しています。私は同じページにもっと多くの結果を表示するために、下にshow-moreボタンを追加したいと思います。

私は初心者ですので、コード内の間違いを指摘すればかなり役に立ちます。今まではlocalhostで完全に動作しています。

+0

は、あなたのシステムの中にjQueryライブラリを統合の可能性があるだろうか? AJAXクエリを実行してDOMを変更するためのサンプルコードを提供するほうがずっと簡単です。 –

+0

私はあらゆる種類の提案に開放されています。私はすべてがまだ私にギリシャ語であるので、プロトコルや言語との特定の親和性を持っていません。 私は最終結果に懸念しています。 あなたの提案とコードをお待ちしています – JHA

答えて

0

私はあなたはそれが簡単にデータベースを照会できるようにすることEZのSQLを使用することをお勧め:http://justinvincent.com/ezsql

とjQueryだけでなく: http://jquery.com/

そして、ここではjqueryのでAJAX呼び出しを実行する方法をあなたを示すチュートリアルです:http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

コードからは、$ _GET変数を使用してデータベースをクエリしようとしています。あなたの検索フィールドの名前は「q」と仮定します。 javascriptを使用して結果を動的に表示する。

HTML:

<input type="text" id="q" name="q"/> 
<div id="your_div"></div><!--this is where your html table will be loaded dynamically as you type a value on the textbox--> 

JAVASCRIPT:

<script src="jquery.js"></script> 
<script> 
$(function(){ 
    $('#q').keyup(function(){ 
    var query = $.trim($(this).val()); 
    $('#your_div').load('phpfile.php', {'q' : query}); 
    }); 
}); 
</script> 

PHP:

//database configuration here 

$q = mysql_real_escape_string($_POST['q']); 

//html table here 
関連する問題