Question

我正在尝试更新数据库中的记录而不刷新表单。我有grid.php页面，其中包含显示和更新记录的表单。然后，我的文件update.php带有UPDATE查询。第三个文件是js1.js，带有AJAX代码。如果我将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

披露：我可能听起来令人难以置信的光顾，甚至在我的回答中意味着，请注意，这不是我的意图。我将向您展示如何解决该问题，但首先让我添加一些关于上述代码的评论以及一些建议：

您的HTML结构不佳：form不应该包装每个tr，您应该考虑使用div代替表格，或者在单元格内的表格内的表格＃34; （代码看起来像听起来一样难看）。您可以在此处详细了解类似案例：Create a HTML table where each TR is a FORM
您的SQL语句受SQL注入。这是不好的。真的，非常糟糕。正如我在评论中提到的，考虑更改为MySQLi或PDO并使用参数化查询。您可以在此处详细了解：How can I prevent SQL injection in PHP?
您的HTML代码不干净。一般来说，你的页面会起作用，因为浏览器会有所帮助，但请相信我，这是糟糕的编程：你最终会改变代码，忘记它，它将是一团糟。从我看到的：
- 有多个具有相同ID的元素（循环创建的所有表单）。
- 内联CSS（background-color:）不完整。
- 许多地方缺少行情。
- 有几个没有开放</div>的结束<div>（如果开头div来自header.php，这可能没问题;但即使是这样，代码也会很困难维持）

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

更改这两件事，您的代码将起作用（均在js1.js中）：

将函数包装在$(document).ready中，以便在页面加载完成后执行。
将数据从$("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');
            }
        });

    });
});

Answer 2

好的，我会尽快帮你解决一些问题。

查询

你的查询很复杂，但我觉得不必要。我已经用MySQL做了很长一段时间了，我不记得我在你的方法中使用INNER JOIN的情况。因此，查询的语法要短得多：SQL Aliases

$query = "SELECT s.*, p.Pool, p.AreaManager, e.EmployeeID, e.FirstName
              FROM SpringMgmt as s, Pool as P, Employees as E
              WHERE s.PoolID = p.PoolID AND e.EmployeeID = p.AreaManager ";

HTML

假设您的脚本中的HTML是您希望显示它的方式，这里有一些事情：您可以转义双引号，这样它们就不会破坏您的代码。我会将循环中的代码更改为：Click Here以了解我在代码中添加的".$variable."语句

echo "<form id=\"myForm\" name=\"myForm\"  method=\"post\">";
        echo "<tr>";
        echo "<td data-field-id=\"pool\">".$record['Pool']."</td>";
        echo "<td ><textarea data-field-id=\"notes\" size=\"4\" name=\"Notes\" rows=\"3\" cols=\"22\">".$record['Notes']."</textarea> </td>";
        echo "<td style=\"background-color:\"><input data-field-id=\"submitted\" type=\"text\" size=\"3\" name=\"SOIEstSubmitted\" value=\"".$record['SOIEstSubmitted']."\" /></td>";
        echo "<td ><textarea size=\"4\" data-field-id=\"additional\" name=\"EstAdditional\" rows=3 cols=\"12\">".$record['EstAdditional']."</textarea></td>";
        echo "<td style=\"background-color:\"><input data-field-id=\"meetingScheduled\" 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>";

AJAX / Javascript调用

解释起来有点复杂。 jQuery ajax对象success函数可以接受一些参数来帮助您处理请求。有关详细说明，请参阅this link。跳转有关.done()函数的部分。其中之一是从请求返回的数据。这意味着在update4.php文件中，如果您将数据作为JSON对象输出到浏览器，则可以在原始页面上使用该数据。

$(document).ready(function(){
$('form').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        type: 'post',
        url: 'update4.php',
        data: $(this).serialize(),
        success: function (data,successText) {
           for(var x in data){
              //Use tree traversing to find the input/text elements that have the data-field-id option equal to the x variable; I can't test it right now so I don't want to have this here.
           }
        }
    });

});

}）;

Update4.php

正如另一位用户在评论部分指出的那样，您的查询很容易出现SQL注入。请按照他们提供的链接阅读更多信息。

现在，假设您想要返回所有返回的数据，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]'"; 
               Don't do this, please use a prepared statement or mysql(i)_real_escape_string() on the data.*/
        $result = mysql_query($UpdateQuery);
        if($result!==false){
              echo json_encode(array(
                     'notes'=> $_POST['Notes'],
                     'submitted'=> $_POST['SOIEstSubmitted'],
                     'additional'=>$_POST['EstAdditional'],
                     'meetingScheduled'=>$_POST['SOIMeetingScheduled']
                  ));
        }
    };

注意我 NOT 建议这样做。您应该将这些$_POST变量移动到已正确清理的其他变量中。从不假设您的用户不了解网络技术。始终，始终假定用户是恶意企图窃取数据库中数据的人。因此，始终检查用户输入的数据。我设置这个的唯一原因是因为你似乎对网络开发的这些方面相当新，并且我已经提供了所有其他信息，我不想让你超负荷并让你失望来自网站开发/设计。

旁注

我建议查找各种模板引擎。将显示（HTML）和数据（PHP）尽可能分开通常是一种更好的做法。我之前使用的唯一模板引擎是PhpBB 3模板引擎的修改版本，以及Smarty（phpBB团队基于其模板引擎）。

自从开始输入此内容后，我发现了另一个答案，并快速阅读。我想我们两个人都会解决你整体问题的不同部分，所以我会把这篇文章作为参考给你，不过我觉得其他用户的回答比我的要好一些。我重复他的观点，如果我听起来居高临下或卑鄙，我不是故意的。

另外，由于我确定有人会或已经指出过你，所以养成使用mysqli_ *函数的习惯，因为在即将推出的PHP版本中，mysql_将被弃用（不再可用）。

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

2 个答案:

查询

HTML

AJAX / Javascript调用

Update4.php

旁注