如何防止整个页面加载?当我从下拉菜单中选择一个选项时,无论我尝试什么,页面都会重新加载。我不确定它是否因为你无法阻止“改变”事件,或者我的ajax是错误的。
<form action="" method="get" id="rati">
<select name="value" onchange="this.form.submit()">
<option value="default" selected="selected"></option>
<option value="Authors">Authors</option>
<option value="Papers">Papers</option>
<option value="countries">Countries</option>
<option value="Organisations">Organisations</option>
</select>
</form>
<script>
$(document).ready(function (e) {
$("[name='value']").on('change', function () {
e.preventDeault();
$.ajax({
type: "GET",
url: "localhost:1234/",
crossDomain: true,
dataType: "json",
data: $("#rati").serialize(),
});
});
});
</script>
jQuery.on
时已经分配了该事件。onchange="this.form.submit()
将导致重新加载,提交更改表单将提交当前页面。您应该遵循最佳实践,并使用jQuery submit
或更好的vanillaJS $form.on('submit', cb)
在您的表单上分配您的form.addEventListener('submit', cb, false)
事件。event
错误的ready
而不是on
。id
<form />
你有$(document).ready(function () {
$("[name='value']").on('change', function (e) {
e.preventDefault();
$.ajax({
type: "GET",
url: "localhost:1234/",
crossDomain: true,
dataType: "json",
data: $("#rati").serialize(),
});
});
});
,但它应该是<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="rati">
<select name="value">
<option value="default" selected="selected"></option>
<option value="Authors">Authors</option>
<option value="Papers">Papers</option>
<option value="countries">Countries</option>
<option value="Organisations">Organisations</option>
</select>
</form>
。看起来像一个简单的拼写错误。