通过AJAX选择更改提交表单

假设我有这样的形式：

<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框架,它抽象出所有的跨浏览器问题,所以你不必担心它们.

试试js框架

Jquery只是一个这样的框架,其中包含诸如.change()之类的方法,它为诸如< select>之类的元素的变更事件附加处理程序.和执行GET请求的.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'
    });

});

一些参考文献会比我的解释更好

请注意,要使此代码生效,您需要在页面上包含jquery库,其中包含< script>标签.

见here for a quick start guide on using jquery

And here for a beginners tutorial on how to use jquery’s ajax() method

原文地址：https://www.jb51.cc/ajax/160150.html