使用下拉菜单阻止页面加载

问题描述 投票:1回答:2

如何防止整个页面加载?当我从下拉菜单中选择一个选项时,无论我尝试什么,页面都会重新加载。我不确定它是否因为你无法阻止“改变”事件,或者我的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>
javascript html
2个回答
0
投票
  1. 最佳实践,使用javascript绑定事件,而不是在HTML中。
  2. 您在调用jQuery.on时已经分配了该事件。
  3. 执行onchange="this.form.submit()将导致重新加载,提交更改表单将提交当前页面。您应该遵循最佳实践,并使用jQuery submit或更好的vanillaJS $form.on('submit', cb)在您的表单上分配您的form.addEventListener('submit', cb, false)事件。
  4. 你使用event错误的ready而不是on
  5. 不要使用qazxsw poi,除非你的qazxsw poi除非你想首先限制它的存在每页1,原因有些奇怪。
  6. jQuery已经过时了,你应该把它放在新项目中。选择器现在存在于现代浏览器中,并且它们的动画使用了太多的javascript而没有CSS3。

id
<form />

1
投票

你有$(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>。看起来像一个简单的拼写错误。

© www.soinside.com 2019 - 2024. All rights reserved.