Question

我的目的是将表单中的数据提交到服务器，而不是重新加载页面。它甚至不需要显示更新的数据。我正在使用Firefox开发，我正在寻找两条路径来获得我想要的东西：

我发现如果我在表单中放置一个按钮，表单将以包含它的页面名称作为“GET”请求提交。在这种情况下，表单标记没有method属性，action标记为空。我可以将我想要的函数输入到action属性中，浏览器会将其余的表单字段应用于请求。我发现表单的表达方便，但浏览器继续使用服务器的响应取代页面，使我远离原始页面。
从表单中取出按钮并将其专门连接到javascript函数允许我向onreadystatechange事件注册一个函数。这具有运行函数的效果，而不是在服务器响应时重新加载页面。这方面的缺点似乎是函数必须自己制定“GET”请求。

在我看来，应该有一种方法让javascript函数告诉表单使用它自己的设备提交，然后准备好处理响应。作为新人，我不熟悉这个要求的“最佳实践”。

Answer 1

您可以使用<button>发布您的详细信息。

function ajaxPage(postPage, paramList) {
    xmlhttp.open("POST",postPage,false);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(paramList);
    return xmlhttp.responseText;
}

在这种情况下，您的postPage是一段相关代码的地址，paramList是&分隔名称值对的列表。

亲切的问候，西部高地白梗

Answer 2

您可以在表单中添加“onsubmit”功能。

在该函数中返回false或调用event.preventDefault（）非常重要，以防止浏览器发布表单。

HTML：

<form onsubmit="javascript:myFunction()">
    ...
</form>

脚本：

function myFunction(evt) {
    // do your ajax call...
    evt.preventDefault();
}

Answer 3

不需要“提交”，您可以使用ajax搜索自动完成建议实现：

Onfocus On ..即使你将所有表单数据发送到服务器端，你想要自动完成服务器端响应而不是pus，你可以为用户解释你需要的。

This链接可能对您有所帮助。

Answer 4

这就是我已经结束的内容，如原始问题中所述，继续使用第2号路径，调用脚本的按钮位于表单之外，因此没有提交事件。表格中的数据由脚本收集，如相关问题的答案所述：

https://stackoverflow.com/a/589100/747544

从那里，“get”请求由脚本

制定

XMLHttpRequest.open("GET", "/myCommand?"+queryString ,true);
XMLHttpRequest.send(null);

脚本实际上“扫描”了表单，而没有提交过，因此没有必要阻止onSubmit事件返回false的默认行为。或者preventDefault（）。

使用Ajax的“安静”表单提交

4 个答案: