使用Ajax, PHP, MYSQL更新表单

最后弄明白了。谢谢大家的帮助。

<p id="alert"></p>    
<form id="form" method="post" action="/ajax/update_company_info.php">
    <!-- start id-form -->
    <table border="0" cellpadding="0" cellspacing="0"  id="id-form">
    <tr>
        <th valign="top">Business Name:</th>
        <td><input type="text" name="company_name" class="inp-form" /></td>
        <td></td>
    </tr>
    <tr>
        <th valign="top">Address 1:</th>
        <td><input type="text" name="address_1" class="inp-form" /></td>
        <td></td>
    </tr>
    <tr>
        <th valign="top">Address 2:</th>
        <td><input type="text" name="address_2" class="inp-form" /></td>
        <td></td>
    </tr>

<tr>
    <th>&nbsp;</th>
    <td valign="top">
            <input id="where" type="hidden" name="customer_id" value="1" />
            <input type="submit" value="Save" id="submit">
    </td>
    <td></td>
</tr>
</table>
<!-- end id-form  -->
</form>

update.js

$(document).ready(function() {
$('form').submit(function(evt) {
  evt.preventDefault();
   $.each(this, function() {
            // VARIABLES: Input-specific
            var input = $(this);
            var value = input.val();
            var column = input.attr('name');
            // VARIABLES: Form-specific
            var form = input.parents('form');
            //var method = form.attr('method');
            //var action = form.attr('action');
            // VARIABLES: Where to update in database
            var where_val = form.find('#where').val();
            var where_col = form.find('#where').attr('name');
  $.ajax({
      url: "/ajax/update_company_info.php",
      data: {
                        val: value,
                        col: column,
                        w_col: where_col,
                        w_val: where_val
      },
      type: "POST",
      success: function(data) {         
      $('#alert').html("<p>Sent Successfully!</p>");
                        }
  }); // end post
  });// end each input value
}); // end submit
}); // end ready

update_customer_info.php

    <?php
include($_SERVER['DOCUMENT_ROOT'] . '/load.php');
function clean($value)
{
    return mysql_real_escape_string($value);
}
// FORM: Variables were posted
if (count($_POST))
{
    // Prepare form variables for database
    foreach($_POST as $column => $value)
        ${$column} = clean($value);
    // Perform MySQL UPDATE
    $result = mysql_query("UPDATE customers SET ".$col."='".$val."'
        WHERE ".$w_col."='".$w_val."'")
        or die ('Error: Unable to update.');
}
?>

1. 我认为你想在提交时更新表单。所以你应该使用下面的按钮删除提交。

   <button id="myBtn">Save</button>.
   

2. 你应该在你的js文件中添加下面的代码。

   var myBtn = document.getElementById('myBtn'); 
   myBtn.addEventListener('click', function(event){ 
       Updateform('give id of the form'); 
   }); 
   function updateform(id){
       var data = $('#'+id).serialize();
       // alert(data);
       $.ajax({
           type: 'POST',
           url: "/ajax/update_company_info.php",
           data: data,
           success: function(data) {
               $('#id').html(data);
               // alert(data);
               //alert(data);
           },
           error: function(data) { // if error occured
               alert("Error occured, please try again");
           },
       });
   

   1. 你可以在你的php代码中使用unserialize()来检索输入值作为数组。所以你可以保存数据到数据库和任何你想要的。我希望你能得到答案。因此，您的代码将变成

         <form method="POST" action="#" id="form1">
          <!-- start id-form -->
         <table border="0" cellpadding="0" cellspacing="0"  id="id-form">
         <tr>
          <th valign="top">Business Name:</th>
          <td><input type="text" name="company_name" class="inp-form" /></td>
          <td></td>
      </tr>
      <tr>
          <th valign="top">Address 1:</th>
          <td><input type="text" name="address_1" class="inp-form" /></td>
          <td></td>
      </tr>
      <tr>
          <th valign="top">Address 2:</th>
          <td><input type="text" name="address_2" class="inp-form" /></td>
          <td></td>
      </tr>
         <tr>
      <th>&nbsp;</th>
      <td valign="top">
              <input id="where" type="hidden" name="customer_id" value="1" />
          <button id="myBtn">Save</button>
      </td>
      <td></td> </tr> </table> <!-- end id-form  --> </form> 
      

      你的js代码变成

       var myBtn = document.getElementById('myBtn'); 
       myBtn.addEventListener('click', function(event)
      {   Updateform('form1'); }); 
      function updateform(id){
                  var data = $('#'+id).serialize();
                 // alert(data);
                   $.ajax({
                      type: 'POST',
                      url: "/ajax/update_company_info.php",
                      data: data,
                       success: function(data) {
                           $('#id').html(data);
                     // alert(data);
                       //alert(data);
                        },
                        error: function(data) { // if error occured
                              alert("Error occured, please try again");
                          },
                                  }); }
      

   update_company_info.php将变成

          $data=unserialize($_POST['data']);
           // you can retrieve all values from data array and save all .
   

   ?>

而不是:

$(".submit").click(function() {

给你的表单一个id像'myform': <form method="POST" action="#" id="myform">

并使用这个来防止表单的默认提交:

$("#myform").submit(function(e) {
 e.preventDefault();
 //your code
}