首页 > 代码库 > 采用ajax提交POST数据的例子

采用ajax提交POST数据的例子

2024-08-01 19:42:47   231人阅读

问题描述


我们将一个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=http://www.mamicode.com/"A">选项A
>

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=http://www.mamicode.com/"A">选项A
>
后台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>

效果显示：


采用ajax提交POST数据的例子


联系
我们