码迷,mamicode.com
首页 > Web开发 > 详细

采用ajax提交POST数据的例子

时间:2014-11-13 01:52:42      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:blog   http   io   ar   os   java   sp   for   数据   

问题描述


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

bubuko.com,布布扣

bubuko.com,布布扣

提交之后显示的位置:

bubuko.com,布布扣

bubuko.com,布布扣

难点分析


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

效果显示:
bubuko.com,布布扣

采用ajax提交POST数据的例子

标签:blog   http   io   ar   os   java   sp   for   数据   

原文地址:http://blog.csdn.net/qsyzb/article/details/41060423

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!