javascript - 防止表单在提交时刷新 - Ajax Call Angular JS

Question

我正在处理一个搜索表单。此表单采用两个值 The job title 和 Location。并根据这些关键字从网络上抓取数据。提交表单时，表单会刷新。因此，出于这个原因，我将 event.preventDefault() 放在表单提交上。但问题是在 URL 中没有出现表单值。

我想要的是同时获取 URL，并阻止页面刷新。

表单通过GET 方法发送值。 action 属性是 index.php，它是页面本身。

到目前为止我做了什么:

<form method="GET" action="index.php" id="search-form">
			<input type="text" placeholder="Job Title" class="job-search-inp job-title-inp" autocomplete="off" name="job_title" required>
			<input type="text" placeholder="Job Place" class="job-search-inp job-type-inp" autocomplete="off" name="job_loc" required>
			<button  type="submit" id="submit_btn"> <i class="fa fa-search"></i> </button>
</form>

同一index.php页面中的Ajax请求:

$("body").on("submit", "#search-form", function(e) {

  var _e = e.target;

  console.log($(_e).serialize());
  $("#submit_btn i").hide();
  $("#submit_btn").html('<img src="ajax-loader.gif">');

  $http({
    method: "GET",
    url: "crawler3.php",
    data: $(_e).serialize() + "&start=0&crawl=true",
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then(function(res) {
    $("#submit_btn").html('<i class="fa fa-search"></i>');
    console.log(res.data);
  })
})

This is how I want the URL to look : http://localhost.com/Fiverr/Job%20Crawler/index.php?job_title=web&job_loc=pakistan. As the results of will be displayed on the same index.php page, I do not want the page to be refreshed.

Answer 1

通过添加简单的两行代码解决了问题:

window.history.pushState('index.php',
  'title',
  window.location.pathname + '?' + $(_e).serialize()
);