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

Question

我有一个动态HTML表格，可以通过多种方式进行编辑。有一个编辑按钮，您可以在其中编辑内联，行的信息，然后单击保存以保存信息。用于灰显行的停用按钮和随后显示的激活按钮，以便重新激活它。并且还添加了一个行按钮，弹出一个对话框，您可以在其中再次点击添加行并向表中添加另一行。

然而，虽然这一切都很好......我想现在将这些更改/更新写入SQL Server数据库，以便实际保存它们。我希望能够在每个操作（保存，停用/激活和添加行）发生后自动保存这些更改。我想要一个UPDATE查询，单击“保存”按钮，并在单击表单中的“添加行”按钮后运行INSERT查询。我现在有一些Ajax，但它不起作用。我现在有了所有必要的代码，专注于写入DB的添加行按钮。我之前从未做过这样的事情，所以任何帮助/建议/代码都会受到赞赏！

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>

对话框的JavaScript和ajax：

// ----- Dialog Box -----

$( function() {   

    var dialog, form,

      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      phoneRegex = /^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$/,
      mr_name = $( "#mr_name" ),
      buyer_id = $( "#buyer_id" ),
      poc_n = $( "#poc_n" ),
      poc_e = $( "#poc_e" ),
      poc_p = $( "#poc_p" ),
      allFields = $( [] ).add( mr_name ).add( buyer_id ).add( poc_n ).add( poc_e ).add( poc_p ),
      tips = $( ".validateTips" );
  console.log(allFields);

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }

    function addVendor() {
      var valid = true;
      allFields.removeClass( "ui-state-error" );

      valid = valid && checkRegexp( mr_name, /^[a-z]([0-9a-z_\s])+$/i, "Please enter a valid vendor name" );
      valid = valid && checkRegexp( buyer_id, /^(0|[1-9][0-9]*)$/, "Please enter a valid Buyer ID" );
      valid = valid && checkRegexp( poc_n, /^[a-zA-Z ]*$/, "Please enter a valid name" );
      valid = valid && checkRegexp( poc_e, emailRegex, "Please enter a valid email" );
      valid = valid && checkRegexp( poc_p, phoneRegex, "Please enter a valid phone number" );

      if ( valid ) {
        var $tr = $( "#html_master tbody tr" ).eq(0).clone();
        $.each(allFields, function(){
          $tr.find('.' + $(this).attr('id')).html( $(this).val() );
        });
        $tr.find('.mr_id').html( $( "#html_master tbody tr" ).length + 1 );
        $( "#html_master tbody" ).append($tr);
        dialog.dialog( "close" );
      }
      return valid;
    }

    var dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Add Row": addVendor,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
      }
    });

    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addVendor();
    });

    $( ".create-user" ).button().on( "click", function() {
      dialog.dialog( "open" );
    });
  } );





$(document).ready(function(){
$("#submit").click(function(){
var mr_name = $("#mr_name").val();
var buyer_id = $("#buyer_id").val();
var poc_n = $("#poc_n").val();
var poc_e = $("#poc_e").val();
var poc_p = $("#poc_p").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'mr_name1='+ mr_name + '&buyer_id1='+ buyer_id + '&poc_n1='+ poc_n + '&poc_e1='+ poc_e + '&poc_p1='+ poc_p;
if(mr_name==''||buyer_id==''||poc_n==''||poc_e==''||poc_p=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});

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

?>