问题描述
我们将一个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>
效果显示：
时间： 2024-10-18 13:28:05