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

发布时间:2022-04-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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');
            }
        });

    });
});

脚本宝典总结

以上是脚本宝典为你收集整理的php – 使用AJAX更新记录而无需刷新表单全部内容,希望文章能够帮你解决php – 使用AJAX更新记录而无需刷新表单所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。