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

Question

I have a simple website, not a PHP site. i am using a free host. I want to post data on "blog_1.xhtml" page.

the form is given below :

<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>

Now i want to post the data without reloading the whole page. Can anyone help me?

Thanks in advance :)

Answer 1

Assuming that you have JQUERY allowed:

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

Answer 2

You kind find more information and example solutions here: http://api.jquery.com/jquery.post/ .

You can alos stop the form from submitting normally like this:

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

Answer 3

POST data is data that is handled server side . And Javascript is on client side. So there is no way you can read a post data using JavaScript.

You can't do this using forms the normal way. Instead, you want to use AJAX while working with some server side language. A sample function that will submit the data and alert the page response.

<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>

OR use the GET method to send data and then on the other page retrieve the values from URL. But the user will definitely be redirected in this case.