如何提交表单而不用HTML重新加载整个页面？

Question

我有一个简单的网站，而不是PHP网站。 我正在使用免费主机。 我想在“ blog_1.xhtml”页面上发布数据。

表格如下：

<form method="post" action="blog_1.xhtml">
    <input type="hidden" name="fnc" value="new"/>    
    <input type="hidden" name="blog_title" value="USERS STATUS"/>
    <input type="text" name="blog_body" value=""/>
    <input type="submit" name="submit" value="Post"/>
</form>

现在，我想发布数据而无需重新加载整个页面。 谁能帮我？

提前致谢 ：）

Answer 1

假设您已允许JQUERY：

<script>
    var p=$("form").serialize();
    $.post("/blog_1.xhtml",p,function(data){
        alert('result html:' + data);
        });
</script>

Answer 2

您可以在此处找到更多信息和示例解决方案： http : //api.jquery.com/jquery.post/ 。

您可以像这样阻止表单正常提交：

// Stop form from submitting normally
event.preventDefault();

Answer 3

POST数据是在服务器端处理的数据 。 Javascript位于客户端。 因此，您无法使用JavaScript读取帖子数据。

您不能使用表格的正常方式进行此操作。 相反，您想在使用某些服务器端语言时使用AJAX。 一个示例函数，它将提交数据并警告页面响应。

<form action="" method="get" onsubmit="return submitForm();">
   <input name="search" type="text">
   <input type="submit" value="Search" >
 </form>
<script>
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);
        }
    }
</script>

或使用GET方法发送数据，然后在另一页上从URL检索值。 但是在这种情况下，肯定会重定向用户。