使用PHP，Ajax和JavaScript將數據庫中每一行的數據放入一個單獨的div

我有一個數據庫表，其中包括一個id,name和city。我試圖將名稱和城市放入表中每行的div中。這是我的html：使用PHP，Ajax和JavaScript將數據庫中每一行的數據放入一個單獨的div

<html> 
    <head> 
    <script> 
    function ajax_post(){ 
     var list= document.getElementsByClassName("something"); 
     // Create our XMLHttpRequest object 
     var hr = new XMLHttpRequest(); 
     // Create some variables we need to send to our PHP file 
     var url = "load.php"; 
     var cnt= list.length; 
     var coun= "count="+cnt; 
     var fn = "";//document.getElementById("first_name").value; 
     var vars = "firstname="+fn+"&count="+cnt; 



     hr.open("POST", url, true); 
     // Set content type header information for sending url encoded  variables in the request 
     hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     // Access the onreadystatechange event for the XMLHttpRequest object 
      hr.onreadystatechange = function() { 
      if(hr.readyState == 4 && hr.status == 200) { 

      var nlist= document.getElementsByClassName("bname"); 
      var clist= document.getElementsByClassName("cname"); 

      for(i = 0; i < list.length; i++){ 

       var u=1; 
       var t=0; 

      var parts = hr.responseText.split("----Seperator----"); 
      var one = parts[0]; 
      var two = parts[1]; 
      nlist[i].innerHTML=parts[0]; 
      clist[i].innerHTML=parts[1]; 

      } 

     } 
    } 
    // Send the data to PHP now... and wait for response to update the status div 
    hr.send(vars,coun); // Actually execute the request 
    document.getElementById("status").innerHTML = "processing..."; 

} 
</script> 


</head> 
<body> 


<input name="myBtn" type="button" value="Submit Data" onclick="ajax_post();"> <br><br> 


<div id="h0" class="something"> 
    <div id="n1" class="bname"> </div> 
    <div id="c1" class="cname"> </div> 
</div> 
<div id="h1" class="something"> 
    <div id="n2" class="bname"> </div> 
    <div id="c1" class="cname"> </div> 
</div> 


</body> 
</html>

這是我的PHP代碼：

<?php 
    session_start(); 

    $fname = $_POST['firstname']; 
    $count = $_POST['count']; 
    $newcnt = $count + 1; 

    mysql_connect("localhost", "root", ""); 
    mysql_select_db("testing_ajax"); 

    for ($in = 0; $in < $newcnt; $in++) { 
     $res = mysql_query("SELECT id,name,city FROM table1 WHERE id LIKE('$in%')"); 

     while ($row = mysql_fetch_array($res)) { 
      $name = $row["name"]; 
      $city = $row["city"]; 
      $id = $row["id"]; 
      echo $name . "----Seperator----" . $city; 
     } 
    } 
?>

是我得到是，在presing提交它只是從第一行平放在頭名的結果，城市到兩個divs。

即時通訊設法讓它打印第一個div中的第一行（daniel，bray）和第二個div中的第二行（niamh，greystones）。非常感謝所有幫助你們有< 3.

來源

2016-04-14 Dan Kelly

您可以使用JSON發送數組來代替字符串：

JSON是跨語言（基於JS）陣列格式：http://json.org/

PHP ：

$array = Array(); 
while($row=mysql_fetch_array($res)){ 


    $name = $row["name"]; 
    $city = $row["city"]; 
    $id=$row["id"]; 


    $array[] = array("name" => $name, "city" => $city) 

} 

echo json_encode($array); //echo "[{"name":"n1","city":"NY"},{"name":"n2","city":"Paris"}, ...]

和JS：

if(hr.readyState == 4 && hr.status == 200) { 

     var nlist= document.getElementsByClassName("bname"); 
     var clist= document.getElementsByClassName("cname"); 

     var data = JSON.parse(hr.responseText); //we parse the list and get an array 

     for(i = 0; i < data.length; i++){ 

      var parts = data[i] 
      var one = parts["name"]; 
      var two = parts["city"]; 
      nlist[i].innerHTML=one; 
      clist[i].innerHTML=two; 

     } 
    }

來源

2016-04-14 13:04:17 Vincent

你是我的英雄先生，謝謝<3它正是我想要的。 –

如果我理解正確的話你傳遞只能從PHP 2rows，並試圖將它們分配到div如果這是正確的，那麼你必須在這裏

nlist[i].innerHTML=parts[0]; 
clist[i].innerHTML=parts[1];

一個問題你返回的輸出會像name1 ---seperator--- city1---seperator--- name2 ---seperator--- city2的parts將有4元素，但只使用0,1所以要儘量replce與i

嘗試：

for(i = 0; i < list.length; i++){ 

       var u=1; 
       var t=0; 

      var parts = hr.responseText.split("----Seperator----"); 
      var one = parts[0]; 
      var two = parts[1]; 
      nlist[i].innerHTML=parts[i]; 
      clist[i].innerHTML=parts[i]; 

      }

雖然這將解決您的problem..you邏輯太複雜了，你正在試圖做的可以像可以輕鬆實現什麼：

PHP：

<?php 
    session_start(); 

    $fname = $_POST['firstname']; 
    $count = $_POST['count']; 
    $newcnt = $count + 1; 

    mysql_connect("localhost", "root", ""); 
    mysql_select_db("testing_ajax"); 

    for ($in = 0; $in < $newcnt; $in++) { 
     $res = mysql_query("SELECT id,name,city FROM table1 WHERE id LIKE('$in%')"); 

     while ($row = mysql_fetch_array($res)) { 
      $result[]=(object)array($row["name"],$row["city"]); 
     } 
     echo json_encode($result); 
    } 
?>

和循環在這個JSON中腳本和動態創建HTML

來源

2016-04-14 13:05:29

如果我的名字是'---- Seperator ----'會怎麼樣？我們不知道數據庫裏有什麼......所以如果我的名字是'---- Seperator ----'，會有漂亮的錯誤 – Vincent

@Vincent IK我的編輯仍在進行中 –

使用PHP，Ajax和JavaScript將數據庫中每一行的數據放入一個單獨的div

回答

相關問題