假设我有这种形式:
<form action="Change-status.php" method="post"> <select class="changeStatus" name="changeStatus"> <option value="0">Starting</option> <option value="1">Ongoing</option> <option value="2">Over</option> </select> <input class="projectId" type="hidden" name="projectId" value="<?php echo $data['id'];?>"/> </form>
我目前正在使用此脚本提交表单,但这意味着需要刷新:
$('select').change(function () { $(this).closest('form').submit(); });
我想要做的是在 不 更改 页面的情况下 发送选择更改时的表单。我知道我必须使用AJAX来执行此操作,但是我无法确切地知道如何实现它。
您能指导我如何执行此操作吗?
谢谢你的帮助。
编辑:
考虑了评论之后,我得到了以下代码:
HTML:
<form action="" method="post"> <select class="changeStatus" name="changeStatus"> <option value="0">Starting</option> <option value="1">Ongoing</option> <option value="2">Over</option> </select> <input class="projectId" type="hidden" name="projectId" value="<?php echo $data['id'];?>"/> </form>
JS:
$(document).ready(function() { $('select.changeStatus').change(function(){ $.ajax({ type: 'POST', url: 'Change-status.php', data: {selectFieldValue: $('select.changeStatus').val(), projectId: $('input[name$="projectId"]').val()}, dataType: 'html' }); }); });
PHP的:
<?php include('../Include/Connect.php'); $changeStatus=$_POST['selectFieldValue']; $id=$_POST['projectId']; $sql='UPDATE project SET progress="'.$changeStatus.'" WHERE id="'.$id.'"'; mysql_query($sql) or die("Erreur: ".mysql_error()); ?>
使跨浏览器onchange事件和AJAX请求正常工作并非易事。我建议您使用某种javascript框架,该框架可以抽象掉所有跨浏览器问题,因此您不必担心它们。
onchange
尝试一个js框架
jQuery就是一个这样的框架,它具有诸如这样的方法,.change()该方法将处理程序附加到诸如元素之类的change事件上,<select>并.get()执行GET请求。
.change()
<select>
.get()
这里有一些代码可以帮助您入门:-
// The $ is the shorthand for a jquery function, you can then use jquery // selectors which are essentially the same as css selectors, so here // we select your select field and then bind a function to // it's change event handler $('select.changeStatus').change(function(){ // You can access the value of your select field using the .val() method alert('Select field value has changed to' + $('select.changeStatus').val()); // You can perform an ajax request using the .ajax() method $.ajax({ type: 'GET', url: 'changeStatus.php', // This is the url that will be requested // This is an object of values that will be passed as GET variables and // available inside changeStatus.php as $_GET['selectFieldValue'] etc... data: {selectFieldValue: $('select.changeStatus').val()}, // This is what to do once a successful request has been completed - if // you want to do nothing then simply don't include it. But I suggest you // add something so that your use knows the db has been updated success: function(html){ Do something with the response }, dataType: 'html' }); });
一些参考资料会比我的解释更好
请注意,此代码才能正常工作,您需要在页面上包含带有<script>标签的jquery库。
<script>
有关使用jquery的快速入门指南,请参见此处
这里是有关如何使用jQuery ajax()方法的初学者教程
ajax()