使用AJAX将操作附加到最后一个附加行

时间:2016-02-20 14:14:48

标签: javascript php jquery ajax

我正在使用AJAX将数据发送到服务器并更新当前页面而不重新加载。我有这个脚本:

$.ajax
        ({
            url: 'insert.php', 
            type: 'POST', 
            data: {data1: emp, data2: pos, data3: sal},
            dataType: "json", 

            success:function(data)
            {
                    var emp_n = data.emp_name;
                    var btn = '<button type="Button" id="del" name="del" class="btn btn-danger">Delete</button></a>';
                    $("#before_tr").before("<tr><td>"+data.emp_name+"</td><td>"+data.position+"</td><td>"+data.salary+"</td><td>"+btn+"</td></tr>");

            },

如您所见,我有一个删除按钮,也应添加到同一行。但是这个按钮在我刷新页面之前不会有效。我想要的是添加像这个基于PHP的代码的动作每行的删除按钮:

<tr id="<?php echo $row['id']; ?>">
                    <td contenteditable><?php echo $row['emp_name'] ?></td>
                    <td contenteditable><?php echo $row['position'] ?></td>
                    <td contenteditable><?php echo $row['salary'] ?></td>
                    <td><button type="Button" id="del" name="del" class="btn btn-danger">Delete</button>
                </tr>
                <?php } ?>

我尝试的是以下内容:

$.ajax
        ({
            url: 'insert_with_ajax.php', //Sending variable emp, pos, and sal, into this url
            type: 'POST', //I will get variable and use them inside my PHP code using $_POST['emp']
            data: {data1: emp, data2: pos, data3: sal},//Now we can use $_POST[data1];
            dataType: "json", //JSON or HTML

            success:function(arr)
            {
                //if(data=="success")
                //{
                    //alert("Data added");
                    var emp_n = arr.emp_name;
                    var btn = '<a href="delete_id.php?id="'+emp_n+'><button type="Button" id="del" name="del" class="btn btn-danger">Delete</button></a>';
                    $("#before_tr").before("<tr><td>"+arr.emp_name+"</td><td>"+arr.position+"</td><td>"+arr.salary+"</td><td>"+btn+"</td></tr>");
                    $("#emp_name").val("");
                    $("#position").val("");
                    $("#salary").val("");
                //}
            },

我将此行<a href="delete_id.php?id="'+emp_n+'添加到以下内容中:

var btn = '<a href="delete_id.php?id="'+emp_n+'><button type="Button" id="del" name="del" class="btn btn-danger">Delete</button></a>';

当我点击使用AJAX添加的最后一个删除按钮时,页面转到delete_id,但链接是这样的:

delete_id.php?id=

id等于空。

所以,我正在研究的是,当我们在Facebook上添加状态并直接删除它而不需要重新加载页面时。我正在努力,我希望有人可以提供帮助。

1 个答案:

答案 0 :(得分:1)

再次检查您的代码:

'<a href="delete_id.php?id="'+emp_n+'>' 
                           ^ - see? you have a closing " here.

这意味着您的href属性不会添加任何值,因为它已经关闭。

正确的代码是:

'<a href="delete_id.php?id='+emp_n+'">'
                                    ^ -see? closing " moved after emp_n