表格提交後添加行到表格後不刷新 - 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對阿賈克斯的成功你​​。比，添加就像這樣：

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