Question

我正在撰写搜索表单。此表单包含两个值The job title和Location。在这些关键字的基础上，它从Web抓取数据。在提交表单时，表单会刷新。因此，我将event.preventDefault()放在表单提交上。但问题是在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);
  })
})

这就是我希望网址显示的方式：http://localhost.com/Fiverr/Job%20Crawler/index.php?job_title=web&job_loc=pakistan。由于结果将显示在同一index.php页面上，因此我不希望刷新页面。

Answer 1

在提交时添加返回false。

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

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

 return false;

})

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

1 个答案: