php – 使用AJAX更新记录而无需刷新表单

我正在尝试更新数据库中的记录而不刷新表单.我有grid.php页面,用于显示和更新记录的表单.然后,我有UPDATE查询的文件update.php.第三个文件是带有 AJAX代码的js1.js.如果我通过action = update.php将grid.php映射到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');
            }
        });

    });

});

>你的HTML结构不好：一个表单不应该包装每个tr,你应该考虑使用div而不是表格,或者“在一个单元格内的表格里面”(代码看起来像听起来一样丑陋) ).您可以在此处阅读有关类似案例的更多信息：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(背景颜色:).
>许多地方缺少行情.
>有两个关闭< / 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',data: $(this).serialize(),success: function () {
                alert('form was submitted');
            }
        });

    });
});

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!