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

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

javascript php html

使用PHP、Ajax和JavaScript将数据库中每一行的数据放入一个单独的div中,javascript,php,html,Javascript,Php,Html,我有一个数据库表，其中包含id、name和city。我试图为表中的每一行在div中输入名称和城市。这是我的html： <html> <head> <script> function ajax_post(){ var list= document.getElementsByClassName("something"); // Create our XMLHttpRequest object var

我有一个数据库表，其中包含

id

、

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>


函数ajax_post（）{
var list=document.getElementsByClassName（“某物”）；
//创建XMLHttpRequest对象
var hr=新的XMLHttpRequest（）；
//创建一些我们需要发送到PHP文件的变量
var url=“load.php”；
var cnt=list.length；
var conn=“count=”+cnt；
var fn=”“；//document.getElementById（“first_name”）.value；
var vars=“firstname=“+fn+”&count=“+cnt；
hr.open（“POST”，url，true）；
//设置用于在请求中发送url编码变量的内容类型标头信息
hr.setRequestHeader（“内容类型”、“应用程序/x-www-form-urlencoded”）；
//访问XMLHttpRequest对象的onreadystatechange事件
hr.onreadystatechange=函数（）{
如果（hr.readyState==4&&hr.status==200）{
var nlist=document.getElementsByClassName（“bname”）；
var clist=document.getElementsByClassName（“cname”）；
对于（i=0；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)) {
            $name = $row["name"];
            $city = $row["city"];
            $id = $row["id"];
            echo $name . "----Seperator----" . $city;
        }
    }
?>

您可以使用JSON发送数组而不是字符串：
JSON是一种跨语言（基于JS）数组格式：
PHP:
和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;

        }
    }

if（hr.readyState==4&&hr.status==200）{
var nlist=document.getElementsByClassName（“bname”）；
var clist=document.getElementsByClassName（“cname”）；
var data=JSON.parse（hr.responseText）；//我们解析列表并得到一个数组
对于（i=0；i如果我理解正确，您只传递了来自php的2行代码
然后尝试将它们分配到div
如果正确，那么这里有个问题
nlist[i].innerHTML=parts[0];
clist[i].innerHTML=parts[1];

您返回的输出类似于name1---separator---city1---separator---name2---separator---city2
这些部分将有4个元素，但您只使用0,1
，所以请尝试用i
来回答这个问题
尝试：
for（i=0；i

虽然这会解决你的问题。你的逻辑太复杂了。你想做的事情很容易实现，比如：
PHP:
如果我的名字是--separator--？我们不知道数据库里有什么。。。因此，如果我的名字是分离者，那么将会有美丽的布格。你是我的英雄，先生，谢谢
nlist[i].innerHTML=parts[0];
clist[i].innerHTML=parts[1];

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