使用 PHP、Ajax 和 JavaScript 将数据库中每一行的数据放入单独的 div答案

【问题标题】：Using PHP, Ajax and JavaScript to put data from every row in my database into a separate div使用 PHP、Ajax 和 JavaScript 将数据库中每一行的数据放入单独的 div
【发布时间】：2016-08-06 01:10:54
【问题描述】：

我有一个带有id、name 和city 的数据库表。我正在尝试将 name 和 city 放入表中每一行的 div 中。这是我的html：

<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;
        }
    }
?>

我得到的结果是，在按下提交时，它只是从第一行中提取并将名字、城市放入两个 div。

我试图让它在第一个 div 中打印第一行（daniel，bray），在第二个 div 中打印第二行（niamh，greystones）。非常感谢你们提供的任何帮助

【问题讨论】：

标签： javascript php html

【解决方案1】：

您可以使用 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;

        }
    }

【讨论】：

你是我的英雄先生，谢谢你

【解决方案2】：

如果我理解正确，您只从 php 传递了 2 行并尝试将它们分配给div，如果是这样，那么您在这里遇到了问题

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

您返回的输出类似于name1 ---seperator--- city1---seperator--- name2 ---seperator--- city2，parts 将有 4 个元素，但您仅使用 0,1，因此请尝试使用 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];

            }

虽然这会解决你的问题..你的逻辑太复杂了你想要做的事情可以很容易地实现，比如：

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

【讨论】：

如果我的名字是 ----Seperator---- 怎么办？我们不知道数据库里有什么......所以如果我的名字是----Seperator----，就会有漂亮的错误