select 无需重新加载页面的选项

Question

我知道，我的代码不好，但我尽力了。

这是我的代码：

function submitForm() {
    document.getElementById("formElement").submit();
}

jQuery(document).ready(function($) {
var img = new Image();
    $(img).load(function () {
    $(this).hide();
    $('#loader').removeClass('loading').append(this);
    $(this).fadeIn(800);
}).attr('src', '.chart.php?id=<? echo $sid; ?>&date=<? echo $order; ?>');
});

<div id="loader" class="loading"></div>

<select name="order" class="dropdown" onChange="submitForm()">
<option disabled selected> <? echo(CHOOSE); ?> </option>
<option value="./chart.php?id=<? echo $sid; ?>&date=d"> <? echo(CHOOSE_DAY); ?> </option>
<option value="./chart.php?id=<? echo $sid; ?>&date=m"> <? echo(CHOOSE_MONTH); ?> </option>
<option value="./chart.php?id=<? echo $sid; ?>&date=y"> <? echo(CHOOSE_YEAR); ?> </option>
</select>

我的问题是，如果我使用 select 选项，我不想总是重新加载页面。

我希望任何人都可以帮助我，谢谢^^

Answer 1

您需要学习如何使用 jQuery 制作“Ajax”。 您可以从以下内容开始： 使用 jQuery 进行 Ajax 调用的 5 种方法

Answer 2

在您的select ，您正在调用onChange="submitForm()"

您的submitForm() function 提交表单。

如果你想通过 ajax 提交表单，而不是通过标准的表单提交，它总是会重新加载页面，那么在你的jQuery(document).ready(function($){})调用中，你可以使用$.post ：

jQuery(document).ready(function($){
    $('#formElement').submit(function(){
        $.post('url/to/post/to.php', $(this).serialize, function(data){
            // Some code to run on successful post
        });
        return false;
    });
})

这样，当您的submitForm() function 调用.submit()时， return false; 阻止页面重新加载，但$.post()仍然会将您的数据发布到正在处理您的表单提交的任何页面。