使用 Ajax、PHP、MYSQL 更新表单

Posted

技术标签:

【中文标题】使用 Ajax、PHP、MYSQL 更新表单【英文标题】:Update form using Ajax, PHP, MYSQL 【发布时间】:2014-09-11 13:24:56 【问题描述】:

我找到了一个自动提交表单数据的教程,但我想做的只是添加一个提交按钮来将数据传递给 ajax。

我的目标是拥有一个具有多个输入的表单,当用户单击提交按钮时,它会通过 ajax 发送它并更新页面而不重新加载页面。此外,另一个关键部分是将所有输入发布到数组中的方式,以便在运行更新脚本时,输入字段中的名称属性与数据库中的列匹配。

我想我已经接近了。我已经搜索并没有找到我的确切解决方案。提前致谢。

<script type="text/javascript" src="/js/update.js"></script>

<form method="POST" action="#" id="myform">

    <!-- 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>

<div id="alert">    
    </td>
    <td></td>
</tr>
</table>
<!-- end id-form  -->
</form>

update.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').text('Updated');
                 $('#alert').fadeOut().fadeIn();

              ,
              error: function(data)  // if error occured
                    alert("Error occured, please try again");
                ,
                        ); 

update_customer_info.php

<?php

include($_SERVER['DOCUMENT_ROOT'] . '/load.php');

// FORM: Variables were posted
if (count($_POST))

$data=unserialize($_POST['data']);
// Prepare form variables for database
foreach($data as $column => $value)
    $$column = clean($value);

// Perform mysql UPDATE
$result = mysql_query("UPDATE customers SET ".$column."='".$value."'
    WHERE ".$w_col."='".$w_val."'")
    or die ('Error: Unable to update.');



?>

【问题讨论】:

“culumn”变量应该包含什么? @AminJafari 它应该是数据库中的列之一,例如有一个名为 company_name, address_1, address_2 的列,然后更新到数据库的值将是从表单提交的值 好的,知道了,正在处理中 您将col: column 设置为提交按钮$(".submit").click(function() var input = $(this); var column = input.attr('name'); 的名称属性,根据您的表单代码,该属性未设置。 危险:您使用的是an obsolete database API,应该使用modern replacement。您也容易受到SQL injection attacks的影响,现代 API 可以让您更轻松地从 defend 中获得。 【参考方案1】:

终于弄明白了。感谢大家的帮助。

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

?>

【讨论】:

【参考方案2】:

代替:

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

给你的表单一个像“myform”这样的ID:&lt;form method="POST" action="#" id="myform"&gt;

并使用它来防止默认提交表单:

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

【讨论】:

【参考方案3】:

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

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

    你应该在你的 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");
            ,
        );
    

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

         <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 .
    

    ?>

【讨论】:

我用你的建议更新了我原来的问题,并将 $data 值添加回了 foreach 函数

以上是关于使用 Ajax、PHP、MYSQL 更新表单的主要内容,如果未能解决你的问题,请参考以下文章

AJAX PHP MYSQL 更新/编辑记录 (jQuery)

PHP表单使用AJAX获取MySQL [重复]

这是正确使用 ajax 和 php - mysql - javascript 吗?

再学ajax--第二天 | 基于php+mysql+ajax的表单注册登录注销

从 PHP (jQuery/AJAX) 插入 MySQL

复选框状态更改时如何更新mysql字段?使用 jquery (ajax)、php 和 mysql