提交表单而不重新加载页面[重复]

我有一个用 JavaScript 构建的函数，我想在表单提交被点击后执行该函数。它基本上完全改变了页面的外观。但我需要搜索框中的一个变量才能继续传递到 JavaScript。目前它会闪烁并重置那里的内容，因为它会重新加载页面。

因此，我在函数中设置了 return false ，以防止它执行此操作，但我想要的变量不会通过表单提交。关于我应该做什么才能得到它有什么想法吗？只要页面刷新就可以了updateTable()功能有效，并且不会因页面重置而重置。

<form action="" method="get" onsubmit="return updateTable();">
  <input name="search" type="text">
  <input type="submit" value="Search" >
</form>

这是updateTable功能：

function updateTable() { 
  var photoViewer = document.getElementById('photoViewer');
  var photo = document.getElementById('photo1').href;
  var numOfPics = 5;
  var columns = 3; 
  var rows = Math.ceil(numOfPics/columns);
  var content="";
  var count=0;

  content = "<table class='photoViewer' id='photoViewer'>";
  for (r = 0; r < rows; r++) {
    content +="<tr>";
    for (c = 0; c < columns; c++) {
      count++;
      if(count == numOfPics) break; // check if number of cells is equal number of pictures to stop
      content +="<td><a href='"+photo+"' id='photo1'><img class='photo' src='"+photo+"' alt='Photo'></a><p>City View</p></td>";
    }
    content +="</tr>";
  }
  content += "</table>";
  photoViewer.innerHTML = content;
}

您无法以正常方式使用表单来执行此操作。相反，您想使用 AJAX。

将提交数据并提醒页面响应的示例函数。

function submitForm() {
    var http = new XMLHttpRequest();
    http.open("POST", "<<whereverTheFormIsGoing>>", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    }
}