采用ajax提交POST数据的例子

问题描述


我们将一个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>

效果显示:


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。