问题叙述性说明
我们会form该input和checkbox提交给异步数据phpserver。处理后的回。
提交之后显示的位置：
难点分析
採用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">
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>
效果显示：
版权声明：本文博客原创文章，博客，未经同意，不得转载。