我试图在不刷新表单的情况下更新数据库中的记录。我有 grid.php 页面，其中包含用于显示和更新记录的表单。然后，我有了包含 UPDATE 查询的文件 update.php。第三个文件是带有 AJAX 代码的 js1.js。如果我通过 action=update.php 将 grid.php 映射到 update.php，更新查询效果很好。但是，一旦我尝试包含 js1.js 文件以防止表单刷新，它就会停止工作。

代码如下:

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

    });

});

最佳答案

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

1. 您的 HTML 结构不好:a form不应该包装每个 tr , 你应该考虑使用 div而不是表格，或“单元格内表格内的表格”(代码看起来和听起来一样难看)。您可以在此处阅读有关类似案例的更多信息:Create a HTML table where each TR is a FORM

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

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

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

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

改变这两个东西，你的代码就会工作(都在 js1.js 中):

1. 将函数包装在 $(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');
            }
        });

    });
});

关于php - 使用 AJAX 更新记录而不刷新表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25465585/