php - 表单提交后不刷新向表中添加行 - jquery ajax php

Question

我有一个 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 不起作用。

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

Answer 1

首先，您需要将 id 提供给您的<table id="mytable">.than 在 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);