无需重新加载页面即可提交表单

Question

我有一个用JavaScript编写的函数，希望在表单提交后执行。它基本上会完全改变页面的外观。但是我需要从搜索框中获取一个变量并传递给JavaScript。目前，页面会因为重新加载而闪烁和重置。

所以我在我的函数中设置了一个返回"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;
}

- Butterflycode

---

您可以使用以下的jQuery插件：https://github.com/jinujd/jQuery-Async-Form - Jinu Joseph Daniel

这个不应该被关闭。上面的链接指向一个大多数强制使用jquery的页面。这里接受的答案使用XMLHttpRequest，我认为这是现代解决方案，并且在任何情况下都不需要添加jquery依赖项来提交表单。 - user2225804

Answer 1

使用普通表单无法完成此操作，您需要使用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);
    }
}

- Matt Bryant

---

+1 对于使用 JQuery 的 AJAX。 - Dmitri

对于我们这些在嵌入式系统上进行页面开发的人来说，这非常方便。 - Dmitri

这将仅执行JavaScript函数，而无需重新加载页面。 - s-hunter

无法工作，页面正在重新加载。 - Markus L

无法添加新答案，因为表单提交是默认重新加载页面，为了防止这种情况，我们需要阻止默认行为。1）更改JS函数定义以捕获提交事件：function submitForm(evt) { 2）在submitForm（）函数内的任何位置使用以下代码阻止事件的默认行为：evt.preventDefault(); - Darien Marks

Answer 2

你可以使用jQuery序列化函数结合get/post方法，如下所示：

你可以使用jQuery serialize函数与get/post方法一起使用，如下：

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theform').serialize())

jQuery序列化文档：http://api.jquery.com/serialize/

使用jQuery进行简单的AJAX提交：

// this is the id of the submit button
$("#submitButtonId").click(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});

- Ahsan Shah

---

这个问题没有标记为jQuery，尽管serialize()非常方便。 - Matt Bryant

为什么会被踩呢？我看到许多人经常发布 jQuery 的答案，即使没有标记 jQuery... - Hanlet Escaño

还有其他框架可供选择。也许（而且很可能）问题的提出者正在学习Javascript并想知道应该如何做。 - the_drow

Answer 3

我猜这就是你需要的。试试这个。

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

而且你的 JavaScript 代码也是一样的

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; // here is check if number of cells 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; 
}

- SarathSprakash

---

如果你动态生成了100个单选按钮，该怎么办？ - NoWar

Answer 4

我用了一种不同于我原本想要的方法...但是它给了我需要的结果。我选择不提交表单，而是获取文本字段的值并在JavaScript中使用它，然后重置文本字段。如果这个问题打扰到了任何人，我很抱歉。

基本上就是这样做的：

    var search = document.getElementById('search').value;
    document.getElementById('search').value = "";

- Butterflycode