Javascript 使用Ajax基于动态HTML表输入更新数据库

我有一个动态HTML表，可以用多种方式编辑。有一个编辑按钮，您可以在其中内联编辑行的信息，然后单击保存保存信息。一个使行变灰的停用按钮和一个随后出现的激活按钮以重新激活行。以及“添加行”按钮，该按钮将弹出一个对话框，您可以再次单击“添加行”并将另一行添加到表中

不过，尽管这一切都很好，但我想现在就将这些更改/更新写入SQL Server数据库，以便它能够实际保存它们。我希望能够在每次操作（保存、停用/激活和添加行）发生后自动保存这些更改。我希望在单击“保存”按钮时进行更新查询，并在单击表单中的“添加行”按钮后运行插入查询。我现在有一些Ajax，但它不工作。我现在已经有了所有必要的代码来关注addrow按钮写入数据库。我以前从来没有做过这样的事情，所以任何帮助/建议/代码都将不胜感激

HTML/PHP代码：

<div id="dialog-form" title="Add Vendor">
  <p class="validateTips">All form fields are required.</p>

  <form>
    <fieldset>
      <label for="mr_name">Vendor</label>
      <input type="text" name="mr_name" id="mr_name" class="text ui-widget-content ui-corner-all">
      <label for="buyer_id">Buyer ID</label>
      <input type="text" name="buyer_id" id="buyer_id" class="text ui-widget-content ui-corner-all">
      <label for="poc_n">POC Name</label>
      <input type="text" name="poc_n" id="poc_n" class="text ui-widget-content ui-corner-all">
      <label for="poc_p">POC Email</label>
      <input type="text" name="poc_e" id="poc_e" class="text ui-widget-content ui-corner-all">
      <label for="poc_p">POC Phone</label>
      <input type="text" name="poc_p" id="poc_p" class="text ui-widget-content ui-corner-all">

      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>



<div id="users-contain" class="ui-widget">
<table id="html_master" class="ui-widget ui-widget-content">
<thead>
    <tr class="ui-widget-header">
    <td>ID</td>
    <td>Vendor</td>
    <td>Buyer ID</td>
    <td>POC Name</td>
    <td>POC Email</td>
    <td>POC Phone</td>
    <td>Edit/Delete</td>
    </tr>
</thead>
<tbody>

<?php
    foreach ($dbh->query($sql) as $rows){
    ?>
    <tr>
        <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
        <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
        <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
        <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>     
        <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
        <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
        <td><input type="button" class="edit" name="edit" value="Edit">
        <input type="button" class="deactivate" name="deactivate" value="Deactivate"></td>
    </tr>
 <?php
  }
 ?>
</tbody>

    <input type="button" class="create-user" value="Add Row">

</table>
</div>

Ajax提交代码：

<?php

$host="xxxxxx"; 
$dbName="xxxxxxxxxx"; 
$dbUser="xxxxxx"; 
$dbPass="xxxxxxxxxxxxxxxx";

$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
// Establishing Connection with Server..

//Fetching Values from URL
$mr_name2=$_POST['mr_name1'];
$buyer_id2=$_POST['buyer_id1'];
$poc_n2=$_POST['poc_n1'];
$poc_e2=$_POST['poc_e1'];
$poc_p2=$_POST['poc_p1'];

//Insert query
$query = pdo_query("INSERT into Stage_Rebate_Master(mr_name, buyer_id, poc_n, poc_e, poc_p) values ('$mr_name2', '$buyer_id2', '$poc_n2','$poc_e2', '$poc_p2')");
echo "Form Submitted Succesfully";
pdo_close($dbh); // Connection Closed

?>

<?php

$host="xxxxxx"; 
$dbName="xxxxxxxxxx"; 
$dbUser="xxxxxx"; 
$dbPass="xxxxxxxxxxxxxxxx";

$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
// Establishing Connection with Server..

//Fetching Values from URL
$mr_name2=$_POST['mr_name1'];
$buyer_id2=$_POST['buyer_id1'];
$poc_n2=$_POST['poc_n1'];
$poc_e2=$_POST['poc_e1'];
$poc_p2=$_POST['poc_p1'];

//Insert query
$query = pdo_query("INSERT into Stage_Rebate_Master(mr_name, buyer_id, poc_n, poc_e, poc_p) values ('$mr_name2', '$buyer_id2', '$poc_n2','$poc_e2', '$poc_p2')");
echo "Form Submitted Succesfully";
pdo_close($dbh); // Connection Closed

?>