gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:56:59 24 4
gpt4 key购买 nike

我有一个包含idnamecity 的数据库表。我正在尝试将 namecity 放入表中每一行的 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)。非常感谢你们提供的任何帮助 <3.

最佳答案

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

}
}

关于javascript - 使用 PHP、Ajax 和 JavaScript 将数据库中每一行的数据放入一个单独的 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36623813/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com