脚本宝典收集整理的这篇文章主要介绍了php – 使用AJAX更新记录而无需刷新表单,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
代码如下:
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,请注明来意。