采用ajax提交POST数据的例子

浏览数：75 / 时间：2015年06月09日

问题描述

我们将一个form中的input和checkbox中的数据异步提交到php服务器，经过处理之后传回。

提交之后显示的位置：

难点分析

采用from表单的onsubmit属性阻止表单的提交

<form action="http://www.baidu.com" onsubmit="return check()">

通过check函数的return false;操作阻止表单的提交，实现不刷新提交数据的目的。

获取复选框选中的选项的值

checkbox标签部分：

	  <input type="checkbox" name="checkbox" id="multi-choiceA" value="A">选项A<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceB" value="B">选项B<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceC" value="C">选项C<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceD" value="D">选项D<br/>

javascript处理部分：

		var str = document.getElementsByName("checkbox"); 
		var answer = "";
		for(var i=0;i<str.length;i++)
		{
			if(str[i].checked == true) 
			{ 
				answer += str[i].value; 
			} 
		}
		if(answer == "")alert('请勾选答案，然后提交');
		else
		{	//用户勾选了相关答案，进行相关处理
			var xmlhttp;

采用ajax技术与后台进行交互

	var xmlhttp;
			xmlhttp = new XMLHttpRequest();
			xmlhttp.open("POST","function.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.send("qid="+qid+"&answer="+answer);

			xmlhttp.onreadystatechange=function()
			  {
			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
			    {
			    	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
			    }
			  };

完整代码

前台index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Koastal</title>
</head>

<body>
<form action="http://www.baidu.com" onsubmit="return check()">
问题序号：<input type="text" id="qid"><br/>
选项：<br/>
	  <input type="checkbox" name="checkbox" id="multi-choiceA" value="A">选项A<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceB" value="B">选项B<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceC" value="C">选项C<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceD" value="D">选项D<br/>

	  <input type="submit" value="提交">
</form>

<div id="myDiv"></div>

<script type="text/javascript">
	que = "<?php echo $que;?>";
	answer = "<?php echo $answer;?>";
	function check()
	{
		var qid = document.getElementById("qid").value;
		var str = document.getElementsByName("checkbox"); 
		var answer = "";
		for(var i=0;i<str.length;i++)
		{
			if(str[i].checked == true) 
			{ 
				answer += str[i].value; 
			} 
		}
		if(answer == "")alert('请勾选答案，然后提交');
		else
		{	//用户勾选了相关答案，进行相关处理
			var xmlhttp;
			xmlhttp = new XMLHttpRequest();
			xmlhttp.open("POST","function.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.send("qid="+qid+"&answer="+answer);

			xmlhttp.onreadystatechange=function()
			  {
			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
			    {
			    	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
			    }
			  };
		}

		 return false; 

	}
</script>
</body>
</html>

后台function.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>koastal</title>
</head>

<body>
<?php
	$qid = intval($_POST["qid"]);
	$answer = trim($_POST["answer"]);
	echo "您提交的题目编号是".$qid."，答案是".$answer;
?>
</form>
</body>
</html>

效果显示：