これは、AJAX を使用する目的です。これらの回答は、同じドメインで作業していることを前提としています。
簡単な方法
AJAX を使用する最も簡単な方法は jQuery を使用することですが、これは必ずしも必要ではありません (以下を参照)。 http://www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery
一般的なサンプル:
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
});
http://api.jquery.com/jQuery.ajax/
あまり簡単ではない方法
jQuery を使用したくない場合は、jQuery を使用しなくてもかまいません。 http://www.webreference.com/programming/javascript/ajax_forms/index.html
サンプル HTML
<p><html><br/>
<head><br/>
<title>Form Posts with Ajax</title><br/>
<script type="text/javascript" src="js/Ajax.js"></script><br/>
<script type="text/javascript" src="js/Post.js"></script><br/>
</head><br/><br/>
<body><br/><br/>
<form action="bridge.php" method="post" onsubmit="Post.Send(this); return false;"><br/>
Name:<br/><input type="text" name="name" /><br/>
<br/><br/><br/>
Message:<br/><textarea name="message"></textarea><br/>
<br/><input type="submit" value="submit" /><br/>
</form><br/><br/>
</body><br/>
</html></p>
サンプル JavaScript
var Ajax = new Object();
Ajax.isUpdating = true;
Ajax.Request = function(method, url, query, callback)
{
this.isUpdating = true;
this.callbackMethod = callback;
this.request = (window.XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP");
this.request.onreadystatechange = function() { Ajax.checkReadyState(); };
if(method.toLowerCase() == 'get') url = url+"?"+query;
this.request.open(method, url, true);
this.request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
this.request.send(query);
}
Ajax.checkReadyState = function(_id)
{
switch(this.request.readyState)
{
case 1: break;
case 2: break;
case 3: break;
case 4:
this.isUpdating = false;
this.callbackMethod(this.request.responseXML.documentElement);
}
}