使用AJAX更新记录而不刷新表单

Question

我正在尝试更新数据库中的记录而不刷新表单.我有grid.php页面与表单来显示和更新记录.然后,我有一个文件update.php与UPDATE查询.第三个文件是js1.jsAJAX代码.如果我映射grid.php到update.php通过action=update.php,更新询问的伟大工程.但是一旦我尝试包含js1.js文件以防止表单刷新,它就会停止工作.

代码如下:

grid.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="j1.js"></script>
<?php //query.php
    require_once 'header.php';
    if (!$loggedin) die();

    $query = "SELECT SpringMgmt.SpringMgmtID, 
                     SpringMgmt.SpringMgmtActiveYear, 
                     SpringMgmt.PoolID, 
                     SpringMgmt.Notes, 
                     SpringMgmt.SOIEstSubmitted,
                     SpringMgmt.EstAdditional, 
                     SpringMgmt.SOIMeetingScheduled, 
                     Pool.Pool, 
                     Pool.AreaManager, 
                     Employees.EmployeeID, 
                     Employees.FirstName
              FROM SpringMgmt
                   INNER JOIN Pool ON SpringMgmt.PoolID = Pool.PoolID
                   INNER JOIN Employees ON Employees.EmployeeID = Pool.AreaManager ";
    $result = mysql_query($query);
    echo "OK</div>";
    if (!$result) die ("Database access failed0: " . mysql_error());

    //TABLE AND ITS HEADING
    echo '<table id="header" cellpadding="0" cellspacing="0" border="0" >';
    echo "
    <tr> 
    <th>Pool</th>
    <th>Notes</th>
    <th>SO Sent</th>
    <th>Est</th>
    <th>Meet Date</th>
    </tr> 
    ";
    while($record = mysql_fetch_array($result)){
        echo "<form id='myForm' name='myForm'  method=post>";
        echo "<tr>";
        echo "<td >$record[Pool]</td>";
        echo "<td ><textarea size=4 name=Notes rows=3 cols=22>$record[Notes]</textarea> </td>";
        echo "<td style=background-color:><input type=text size=3 name=SOIEstSubmitted value='$record[SOIEstSubmitted]' /></td>";
        echo "<td ><textarea size=4 name=EstAdditional rows=3 cols=12>$record[EstAdditional]</textarea></td>";
        echo "<td style=background-color:><input type=text size=3 name=SOIMeetingScheduled value='$record[SOIMeetingScheduled]' /></td>";
        echo "<td>
              <input type=hidden name='SpringMgmtID' value=$record[SpringMgmtID] />
              <input type=submit name='submit' id='submit' value='Submit' />
              </div></td>";
        echo "</tr>";
        echo "</form>";
    }
    echo "</table>";
?>   

update4.php:

<?php 
    require_once 'header.php';
    if (!$loggedin) die();

    if(isset($_POST['submit'])){
        $UpdateQuery = "UPDATE SpringMgmt 
                        SET    Notes='$_POST[Notes]',
                               SOIEstSubmitted='$_POST[SOIEstSubmitted]',
                               EstAdditional='$_POST[EstAdditional]',
                               SOIMeetingScheduled='$_POST[SOIMeetingScheduled]'
                        WHERE SpringMgmtID='$_POST[SpringMgmtID]'";
        mysql_query($UpdateQuery);
    };
?>

js1.js

$(function () {

    $('form').on('submit', function (e) {

        e.preventDefault();

        $.ajax({
            type: 'post',
            url: 'update4.php',
            data: $('form').serialize(),
            success: function () {
                alert('form was submitted');
            }
        });

    });

});

Answer 1

披露：我的回答听起来可能令人难以置信，甚至有些刻薄，请注意，这不是我的本意。我将向您展示如何解决该问题，但首先让我添加一些关于上面代码的注释以及一些建议：

1. HTML 的结构不好： aform不应该包装 every tr，您应该考虑使用div而不是表格，或者“单元格内表单内的表格”（代码看起来像听起来一样丑陋）。您可以在此处阅读有关类似案例的更多信息：创建一个 HTML 表，其中每个 TR 都是一个 FORM

2. 您的 SQL 语句会受到 SQL 注入。这不好。真的，真的很糟糕。正如我在评论中提到的，考虑更改为 MySQLi 或 PDO 并使用参数化查询。您可以在这里阅读更多相关信息：How can I Prevent SQL Injection in PHP?

3. 您的 HTML 代码不干净。一般来说，你的页面会工作，因为浏览器会提供帮助，但相信我，这是糟糕的编程：你最终会更改代码，忘记它，这将是一团糟。据我所见：

   • 有多个元素具有相同的 ID（循环创建的所有表单）。
   • 内联 CSS 不完整 ( background-color:)。
   • 很多地方都缺少引号。
   • 有几个</div>没有打开的关闭<div>（如果打开的 div 来自 header.php，这可能没问题；但即使是这种情况，代码也很难维护）

最后，解决方案。我希望你不要跳过上面的所有文字并直接跳到这里，因为它不仅对你现在而且对将来都会有帮助。

更改这两件事，您的代码就可以工作（都在 js1.js 中）：

1. 将函数包装在 a 中$(document).ready，以便在页面加载完成时执行。
2. 将数据从 更改为$("form").serialize()，$(this).serialize()这样您将仅发送带有您单击的按钮的表单中的信息（而不是所有表单）。

js1.js 的最终代码如下所示：

$(document).ready(function () {

    $('form').on('submit', function (e) {

        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'update4.php',
            data: $(this).serialize(),
            success: function () {
                alert('form was submitted');
            }
        });

    });
});