Ajax和SQL在附加行上显示数据库值

时间：2018-07-08 09:38:40

标签： php html sql ajax

我开始学习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();
?>

3 个答案:

答案 0 :(得分：2)

您需要回显ID 

id="<?php echo $row["accid"]; ?>"

希望这会有所帮助

答案 1 :(得分：0)

更改以下内容

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

答案 2 :(得分：0)

我找到了答案，所以这里适合初学者学习ajax，因为这让我很难理解。

因此，PHP和SQL正在编辑服务器，这就是为什么您需要刷新页面以查看新更新的原因。为了使服务器上的页面更新，您基本上需要对其进行伪造。（据我所知），直到再次刷新页面为止。因此，在调用函数时，您将在后台调用PHP脚本，并在前端调用ajax脚本以更改页面上的html内容。

我的主要问题是将值从表单中获取到SQL，并且由于无法在ajax中使用$ _POST而使将要放置在SQL中的值在前端被“伪造”。我没有做的问题是序列化表格信息。在数据部分中，我必须将其放置：

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

            });
        });
});
相关问题
最新问题