js+ajax实现点赞功能
问题遇到的现象和发生背景
最近要用ajax实现点赞的功能，写了很久要不就是没有实时更新要不就是更新的地方错了QAQ
问题相关代码
这是网页代码
<?php
include('conn.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc(id) {
this.id = id;
var xmlhttp;
var Amounts = document.querySelectorAll('.Amount1');
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// for (var j = 1; j < Amounts.length; j++) {
// if (this.id == j) {
// Amounts[j].innerHTML = xmlhttp.responseText;
// }
// }
document.getElementById('Amount1').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("get", "demo_post.php?id=" + this.id, true);
xmlhttp.send();
}
</script>
<style>
img {
width: 15px;
height: 15px;
}
</style>
</head>
<body>
<?php
$sql = mysqli_query($conn, "select * from shop22");
while ($result = mysqli_fetch_array($sql)) {
?>
<div class="box">
<p class="id"><?php echo $result['id'] ?></p>
<p class="Name1"><?php echo $result['Name1'] ?></p>
<p class="Brand1"><?php echo $result['Brand1'] ?></p>
<p class="Price1"><?php echo $result['Price1'] ?></p>
<p id="Amount1"><?php echo $result['Amount1'] ?></p>
<img src="like.png" alt="" onclick="loadXMLDoc(<?php echo $result['id'] ?>)">
</div>
<?php
}
?>
</body>
</html>
这是php处理代码
<?php
include('conn.php');
// 更新
$sql_like = "update shop22 set Amount1=Amount1+1 where id={$_GET['id']}";
mysqli_query($conn, $sql_like);
// 显示
$sql = mysqli_query($conn, "select * from shop22 where id={$_GET['id']}");
$result = mysqli_fetch_array($sql);
$response = $result['Amount1'];
echo $response;
这是数据库
这是网页效果
要实现的是点击红色框框里面的点赞按钮就将相应的Amount1数量+1
运行结果及报错内容
显而易见有了这行代码后：
document.getElementById('Amount1').innerHTML = xmlhttp.responseText;
查找的是页面里所有id是Amount1的元素，这就导致了点击第一个赞后等实时加1，但是点击第二个赞后第二个的Amount1会显示到第一个Amount1里面，然后第二个的在数据库里加了1但是没实时更新（下面是示意图
我的解答思路和尝试过的方法
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// for (var j = 1; j < Amounts.length; j++) {
// if (this.id == j) {
// Amounts[j].innerHTML = xmlhttp.responseText;
// }
// }
document.getElementById('Amount1').innerHTML = xmlhttp.responseText;
}
那部分我注释掉的代码就是我尝试过的方法，but没啥用QAQ
我还试过在“Amount1”里面套id, 但是也没用……
谢谢各位的解答~
容器id要整唯一，不能一样，一样的话document.getElementById只会获取第一个出现的，容器id用记录的id弄成唯一的
改成下面的就行了
<?php
include('conn.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc(id) {
this.id = id;
var xmlhttp;
var Amounts = document.querySelectorAll('.Amount1');
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {////////////建议改成下这种结构，要不出错的话什么反应都没有。Amount容器通过Amount+id的值实现，下面的p容器id也改下，由1改为记录id
if (xmlhttp.status == 200) document.getElementById('Amount' + id).innerHTML = xmlhttp.responseText;
else alert('服务器忙，返回内容如下\n' + xmlhttp.responseText)
}
}
xmlhttp.open("get", "demo_post.php?id=" + this.id, true);
xmlhttp.send();
}
</script>
<style>
img {
width: 15px;
height: 15px;
}
</style>
</head>
<body>
<?php
$sql = mysqli_query($conn, "select * from shop22");
while ($result = mysqli_fetch_array($sql)) {
?>
<div class="box">
<p class="id"><?php echo $result['id'] ?></p>
<p class="Name1"><?php echo $result['Name1'] ?></p>
<p class="Brand1"><?php echo $result['Brand1'] ?></p>
<p class="Price1"><?php echo $result['Price1'] ?></p>
<p id="Amount<?php echo $result['id'] ?>"><?php echo $result['Amount1'] ?></p>
<img src="like.png" alt="" onclick="loadXMLDoc(<?php echo $result['id'] ?>)">
</div>
<?php
}
?>
</body>
</html>
有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~
不要php和html混合起来写，用框架，比如thinkphp
不要自己写ajax 可以用jquery