ajax 和 SQL 在附加行上显示数据库值
Posted
技术标签:
【中文标题】ajax 和 SQL 在附加行上显示数据库值【英文标题】：ajax and SQL display database value on appended row 【发布时间】：2018-07-08 09:38:40 【问题描述】：我开始学习 ajax 来更新我的 SQL 而不刷新页面，我已经成功地让删除功能工作，以及添加一个新行，但是它没有显示正确的信息。如何使用 ajax 在 php 中获得相同的值？添加新行时，我的 ajax curaccid 也不显示任何 html。我已经看了几个小时的其他帖子，但似乎无法理解如何在我的情况下实施其他响应，
非常感谢您的帮助，这是我一直想学习的东西，所以感谢您的宝贵时间！
HTML：
<form method="post" >
<table>
<tr><td></td></tr>
<tr style="background-color:#F9F9F9; height:10px !important;">
<td style="width: 80%; border-bottom:1px solid #DEDEDE;" ><?php include ("components/hourincome.php"); ?>
<span style="float:left; padding-left:6px; font-weight:bold;">Hours:</span> <input style="padding-left:10px; float:left; margin:0px; width:40px; border: 0px solid black; background-color: Transparent;" name="hours" class="p1" id="hours"/>
</td>
<td style="width:15%; border-bottom:1px solid #DEDEDE; padding-right:5px;" >
<input style="float:left; width:100%; height:20px;" name="wage" id="wage" type="text" placeholder="wage"/>
</td>
<td style = "border-bottom: 1px solid #DEDEDE; width: 5%;">
<span href="#" id="<?php $row["accid"] ?>" class="addincomerow" style="font-size:14px; width: 30px; color:white; background-color:#51E77C; padding: 5px; border: 0px solid white; text-decoration:none !important;">
<i class="material-icons" style="font-size: 15px; "><div class=" clickable-clear">add</div></i>
</span>
</td>
</tr>
</table>
</form>
我的 ajax：
$(function()
$(document).on('click','.addincomerow',function()
var curaccid= $(this).attr('id');
var $ele = $(this);
$.ajax(
type:'POST',
url:'components/sql/insertincome.php',
data:'newaccid':curaccid,
success:
function(data)
$(".toprow" + curaccid).append(
'<tr style="" id="row' + curaccid + '">\n\
<td style="width: 30%; border-bottom:1px solid #DEDEDE;">\n\
<span style=" font-size:10px;">(tet$/hr )</span>\n\
<input id="' + curaccid + '" value="' + curaccid + '" style="float:left; margin:0px; width:40px; border: 0px solid black; background-color: Transparent;" name="newaccid" readonly /></td>\n\
<td style=" width: 50%; border-bottom:1px solid #DEDEDE;"> $12 </td>\n\
<td style="width: 15%; border-bottom:1px solid #DEDEDE;"> 31 </td>\n\
<td style = "border-bottom: 1px solid #DEDEDE; width: 5%;"> <span href="#" id="'+ curaccid +'" class="deleteincomerow" style="text-decoration:none !important;"> <i class="material-icons" style="font-size: 15px; "><div class=" clickable-clear">clear</div></i> </span> </td></tr>'
);
);
);
);
这是我的 PHP：
<?php
include 'config.php';
$sqlupdateincome = "INSERT INTO income (username, projectname, hourlywage, totalhours)
VALUES ('John', 'Ochrom Test', '". $_POST['wage'] ."', '". $_POST['hours'] ."')";
if ($conn->query($sqlupdateincome) === TRUE)
echo "New record created successfully";
else
echo "Error: " . $sql . "<br>" . $conn->error;
$conn->close();
?>
【问题讨论】：
在 ajax 请求中您只发送data:'newaccid':curaccid, 然后在 php 中您尝试获取不存在的 $_POST['wage'] 和 $_POST['hours']
不要通过将用户输入连接到字符串中来构建 SQL 查询！您的应用程序将对 SQL 注入开放。 bobby-tables.com
@GordonM 一旦脚本运行，我将更改此设置
【参考方案1】：
你需要回显ID
id="<?php echo $row["accid"]; ?>"
希望对你有帮助
【讨论】：
嘿，谢谢您的回复！我不确定我是否理解，这是放在哪里？在ajax里面？我的数据库中的 SQL 信息也没有被插入，这会解决这个问题吗？谢谢：] 那将是您的 HTML。 " class="addincomerow" style="font-size:14px; width: 30px; color:white; background-color :#51E77C; padding: 5px; border: 0px 纯白色; text-decoration:none !important;"> 【参考方案2】：更改以下内容
function(data)
$(".toprow" + curaccid).append(
'<tr style="" id="row' + curaccid + '">\n\
<td style="width: 30%; border-bottom:1px solid #DEDEDE;">\n\
<span style=" font-size:10px;">(tet$/hr )</span>\n\
<input id="' + curaccid + '" value="' + curaccid + '" style="float:left; margin:0px; width:40px; border: 0px solid black; background-color: Transparent;" name="newaccid" readonly /></td>\n\
<td style=" width: 50%; border-bottom:1px solid #DEDEDE;"> $12 </td>\n\
<td style="width: 15%; border-bottom:1px solid #DEDEDE;"> 31 </td>\n\
<td style = "border-bottom: 1px solid #DEDEDE; width: 5%;"> <span href="#" id="'+ curaccid +'" class="deleteincomerow" style="text-decoration:none !important;"> <i class="material-icons" style="font-size: 15px; "><div class=" clickable-clear">clear</div></i> </span> </td></tr>'
);
到下面的格式并尝试它是否可以工作。
function(data)
$(".toprow" + curaccid).append("<tr><td>John</td><td>Ochrom Test</td><td>"your variable"</td><td>"yourothervariable"</td></tr>"
);
【讨论】：
表格行已正确添加，它是我需要传输的数据。从我的 SQL 中，我需要将 $_POST 变量放在表中 设置一个像varible1=$_POST['wage']; 这样的变量，然后在你的表中使用这个变量。下面的例子。 function(data) $(".toprow" + curaccid).append("<tr><td>John</td><td>Ochrom Test</td><td>" +variable1+"</td><td>"+variable2+"</td></tr>" ); 【参考方案3】：
我找到了答案，所以这里是为刚开始学习 ajax 的人准备的，因为这对我来说有点难以理解。
所以 PHP 和 SQL 正在编辑服务器，这就是为什么您需要刷新页面才能看到新的更新。为了使用服务器更新页面，您基本上需要伪造它..（据我所知）直到页面再次刷新。所以当一个函数被调用时，你会在后台调用PHP脚本，在前端调用ajax脚本来改变页面上的html内容。
我的主要问题是从我的表单获取值到 SQL，并获取将放入 SQL 的值在前端被“伪造”，因为你不能在 ajax 中使用 $_POST .. 我没有做的一个问题是序列化表单信息。在数据部分中，我必须放置：
data:$("#addnewincometable").serialize()
在 Html 中，我必须在表单中添加一个 Id 和方法：
<form id="addnewincometable" method="post" >
和 vualá！
现在 PHP 脚本没有安全保护，所以在任何人离开之前，这是为了学习目的。
感谢大家的回复，你们都在点点滴滴方面提供了帮助，我想给有需要的人一个整体的答案和我的完整脚本。
HTML：
<form id="addnewincometable" method="post" >
<table>
<tr><td></td></tr>
<tr style="background-color:#F9F9F9; height:10px !important;">
<td style="width: 80%; border-bottom:1px solid #DEDEDE;" ><?php include ("components/hourincome.php"); ?>
<span style="float:left; padding-left:6px; font-weight:bold;">Hours:</span> <input style="padding-left:10px; float:left; margin:0px; width:40px; border: 0px solid black; background-color: Transparent;" name="hours" class="p1" id="hours"/>
</td>
<td style="width:15%; border-bottom:1px solid #DEDEDE; padding-right:5px;" >
<input style="float:left; width:100%; height:20px;" name="wage" id="wage" type="text" placeholder="wage"/>
</td>
<td style = "border-bottom: 1px solid #DEDEDE; width: 5%;">
<span href="#" id="<?php echo $row["accid"]; ?>" class="addincomerow" style="font-size:14px; width: 30px; color:white; background-color:#51E77C; padding: 5px; border: 0px solid white; text-decoration:none !important;">
<i class="material-icons" style="font-size: 15px; "><div class=" clickable-clear">add</div></i>
</span>
</td>
</tr>
</table>
</form>
PHP：
<?php
include 'config.php';
$sqlupdateincome = "INSERT INTO income (username, projectname, hourlywage, totalhours)
VALUES ('John', 'Ochrom Test', '". $_POST['wage'] ."', '". $_POST['hours'] ."')";
if ($conn->query($sqlupdateincome) === TRUE)
echo "New record created successfully";
else
echo "Error: " . $sql . "<br>" . $conn->error;
$conn->close(); ?>
AJAX：
$(function()
$(document).on('click','.addincomerow',function()
var curaccid= $(this).attr('id');
var $ele = $(this);
$.ajax(
type:'POST',
url:'components/sql/insertincome.php',
data:$("#addnewincometable").serialize(),
success:
function(data)
$(".toprow" + curaccid).append(
'<tr style="" id="row' + curaccid + '">\n\
<td style="width: 30%; border-bottom:1px solid #DEDEDE;">\n\
<span style=" font-size:10px;">(' + jQuery("#wage").val() + '$/hr )</span>\n\
<input id="' + curaccid + '" value="' + curaccid + '" style="float:left; margin:0px; width:40px; border: 0px solid black; background-color: Transparent;" name="newaccid" readonly /></td>\n\
<td style=" width: 50%; border-bottom:1px solid #DEDEDE;"> $'+ jQuery("#hours").val() +' Total Hours </td>\n\
<td style="width: 15%; border-bottom:1px solid #DEDEDE;"> 31 </td>\n\
<td style = "border-bottom: 1px solid #DEDEDE; width: 5%;"> <span href="#" id="'+ curaccid +'" class="deleteincomerow" style="text-decoration:none !important;"> <i class="material-icons" style="font-size: 15px; "><div class=" clickable-clear">clear</div></i> </span> </td></tr>'
);
);
);
);
【讨论】：
以上是关于ajax 和 SQL 在附加行上显示数据库值的主要内容，如果未能解决你的问题，请参考以下文章
Laravel如何通过ajax按名称或ID搜索在前端仅显示用户帐户的附加患者
在显示错误的 Gridview 中显示 SQL Server 数据库值