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

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);
    }
}