在不刷新的情况下提交表单后将行添加到表中-jquery ajax php - Add row to table after a form submit without refresh - jquery ajax php

Add row to table after a form submit without refresh - jquery ajax php

我有一个ajax表单和一个表。

这是我的ajax代码：

$(function () {
    $(".submitann").click(function () {
        var title = $("#title").val();
        var announcement = $("#announcement").val();
        var dataString = $('#annform');
        if ((title == '') || (announcement == '')) {
            alert("Please Fill In The Fields");
        } else {
            $.ajax({
                type: "POST",
                dataType: "json",
                data: dataString.serialize(),
                url: "http://www.domain.com/formprocess.php",
                success: function (data) {
                    //insert table code here
                });
            }
            return false;
        });
    });

我试过了，但失败了。在php代码中，我完成了以下操作：

$data = '<tr class="odd gradeX">
    <td>
        <input type="checkbox" class="checkboxes" value="1" />
    </td>
    <td><a href="#" class="anntitle" data-type="text" data-pk="'.$id.'" data-original-title="Enter title"
        data-name="title">'.$_POST["title"].'</a>
    </td>
    <td><a class="delete" href="javascript:;">Delete</a>
    </td>
</tr>';
echo json_encode($data);

它能解决许多问题。首先，它进入最后一排。其次，x-editables不起作用。

如何在不刷新页面的情况下向添加行？

首先，您需要将id提供给<table id="mytable">。在ajax成功的情况下，添加如下：

var row_data = "";
row_data +="<tr class='odd gradeX'>
                                <td><input type='checkbox' class='checkboxes' value='1' /></td>
                                <td><a href='#' class='anntitle' data-type='text' data-pk=''.$id.'' data-original-title='Enter title' data-name='title' >'.$_POST['title'].'</a></td>
                                <td><a class='delete' href='javascript:;'>Delete</a></td>
                 </tr>";
$("#mytable").append(row_data);