当前位置: 首页 > 面试题库 >

使用Ajax,PHP,MYSQL更新表单

柴亦
2023-03-14
问题内容

我找到了一个自动提交表单数据的教程,但我要做的就是添加一个提交按钮以将数据传递给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.');
}


?>

问题答案:

最终弄清楚了。谢谢大家的帮助。

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


 类似资料:
  • 在这里,我创建了一个表http://jsbin.com/ojanaji/13/edit和demo:http://jsbin.com/ojanaji/13 因此,当用户单击表上的某些行时,可以自动将表中的值填充到模式窗口中。当点击按钮“编辑行”时,用户打开模式窗口。现在我需要知道如何用列更新mysql表:姓名、性别、年龄、吃过的甜甜圈。 我创建js Ajax: HTML模式窗口和按钮: 那么我现在如

  • 我想使用Ajax更新数据,下面是示例代码。SweetAlert被移位,因为它已经更新了,但是它在数据库中没有生效,因此它给出了一个错误。 这是在单击submit按钮时提交表单的Ajax脚本。 这段代码用于php服务器端,用于将数据插入数据库。

  • 我认为这是一个简单的问题。我不熟悉jQuery。我正在尝试制作脚本,这样当您单击图像时,ajax将调用php文件,该文件将更新mySQL数据库。 我的脚本: HTML: PHP文件: 出于某种原因,完全没有回应。数据库保持不变,html页面没有任何变化。代码是否有问题,或者我无法通过ajax更新数据库?

  • 问题内容: 对于我的新项目,我想要一种现代的方法,不需要在每个数据库请求上重新加载页面。:)我希望脚本查询数据库并使用查询信息创建表。 我尝试了在互联网上找到的不同脚本。下面的一个最接近我的需求。 index.php getdata.php 但是我只得到一个表,里面有一堆{$ value}。我尝试只用$ value,但是得到了一堆零。 我尝试了一个简单的脚本 然后我得到了som结果,但是使用此脚本

  • 问题内容: 我需要有关ajax的帮助。我想更新一个php文件,它将更新数据库。我有一个表格,它将选中的复选框发送到一个php文件,然后更新数据库。我想用ajax做到这一点,但我为此感到挣扎。我知道如何通过Ajax 更新HTML元素,但是无法解决。 HTML脚本 PHP updateDB.php 我希望此更新无需刷新页面。 问题答案: 我只想要一些建议,首先您的html页面代码应该喜欢- 现在我转向

  • 问题内容: 谁能帮助我了解为什么此更新查询未更新数据库中的字段?我在我的php页面中有这个来从数据库中检索当前值: 这是我的HTML表单: 这是我的“ editblogscript”: 我不明白为什么它不起作用。 问题答案: 您必须在查询中的所有VARCHAR内容周围加上单引号。因此,您的更新查询应为: 同样,用POST中的内容直接更新数据库是一种不好的形式。您应该使用mysql_real_esc