Question

我写了一个函数，可以在不同的页面中重复使用以搜索图像。而且我不希望在按Enter键时刷新页面。

没有表单，它可以在onclick事件上正常工作。

如何防止页面重新加载？

这是下面的表格，谢谢。

<form method="post" action="#">
   <div class="input-group form-sm form-2 pl-0 m-b-20">
      <input class="form-control " id="image_keyword" type="text" >
      <div class="input-group-append">
         <button type="submit" class="input-group-text" onsubmit="searchImages()">search</button>
      </div>
   </div>
</form>

JQuery函数。

function searchImages()
{
    let keyword = jQuery("#image_keyword").val();
    let response = searchMedia('image',keyword);
    console.log(response);
    if(response.status === 'success')
    {
        // some code...
    }
}

Answer 1

您需要防止onsubmit事件的默认行为。

function searchImages(e)
{
    e.preventDefault();
    let keyword = jQuery("#image_keyword").val();
    let response = searchMedia('image',keyword);
    console.log(response);
    if(response.status === 'success')
    {
        let data = response.data;
        console.log(data);
    }
}

Answer 2

如果您想限制页面的重新加载：采用： event.preventDefault（）;

Answer 3

在onsubmit标签中使用form函数而不是submit按钮。并传递事件参数。防止使用e.preventDefault()

function searchImages(e) {
 e.preventDefault();
  console.log('ok')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#" onsubmit="searchImages(event)">
  <div class="input-group form-sm form-2 pl-0 m-b-20">
    <input class="form-control " id="image_keyword" type="text">
    <div class="input-group-append">
      <button type="submit" class="input-group-text" >search</button>
    </div>
  </div>
</form>

对于简单Jquery方法。在dom中定义带有提交

$('#form_one').on('submit',function(e){
 e.preventDefault();
  console.log('ok')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#" id="form_one">
  <div class="input-group form-sm form-2 pl-0 m-b-20">
    <input class="form-control " id="image_keyword" type="text">
    <div class="input-group-append">
      <button type="submit" class="input-group-text" >search</button>
    </div>
  </div>
</form>

Answer 4

您需要使用e.preventDefault()和addEventListener

function searchImages(e)
{
    e = e || window.event 
    e.preventDefault();
    let keyword = jQuery("#image_keyword").val();
    let response = searchMedia('image',keyword);
    console.log(response);
    if(response.status === 'success')
    {
        
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#" onsubmit="searchImages(event)">
   <div class="input-group form-sm form-2 pl-0 m-b-20">
      <input class="form-control " id="image_keyword" type="text" >
      <div class="input-group-append">
         <button type="submit" class="input-group-text" >search</button>
      </div>
   </div>
</form>

Answer 5

更改此行：

<button type="submit" class="input-group-text" onsubmit="searchImages()">search</button>

到

<button type="button" class="input-group-text" onclick="searchImages()">search</button>

无需执行其他任何操作。

在表单提交上调用函数时，如何防止页面加载？

5 个答案: