采用ajax提交POST数据的例子

发布时间：2020-12-16 00:16:22 所属栏目：百科来源：网络整理

导读：问题描述我们将一个form中的input和checkbox中的数据异步提交到php服务器，经过处理之后传回。提交之后显示的位置：难点分析采用from表单的onsubmit属性阻止表单的提交 [html] view plain copy form action = "http://www.baidu.com" onsubmit = "return

问题描述

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

提交之后显示的位置：

难点分析

采用from表单的onsubmit属性阻止表单的提交

[html] view plain copy

<formaction="http://www.baidu.com"onsubmit="returncheck()">

通过check函数的return false;操作阻止表单的提交，实现不刷新提交数据的目的。

获取复选框选中的选项的值

checkbox标签部分：

[html] view plain copy

<inputtype="checkbox"name="checkbox"id="multi-choiceA"value="A">选项A<br/>
<inputtype="checkbox"name="checkbox"id="multi-choiceB"value="B">选项B<br/>
<inputtype="checkbox"name="checkbox"id="multi-choiceC"value="C">选项C<br/>
<inputtype="checkbox"name="checkbox"id="multi-choiceD"value="D">选项D<br/>

javascript处理部分：

[html] view plain copy

varstr=document.getElementsByName("checkbox");
varanswer="";
for(vari=0;i<str.length;i++)
{
if(str[i].checked==true)
{
answer+=str[i].value;
}
}
if(answer=="")alert('请勾选答案，然后提交');
else
{//用户勾选了相关答案，进行相关处理
varxmlhttp;

采用ajax技术与后台进行交互

[html] view plain copy

varxmlhttp;
xmlhttp=newXMLHttpRequest();
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

[html] view plain copy

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>Koastal</title>
</head>
<body>
<formaction="http://www.baidu.com"onsubmit="returncheck()">
问题序号：<inputtype="text"id="qid"><br/>
选项：<br/>
<inputtype="checkbox"name="checkbox"id="multi-choiceA"value="A">选项A<br/>
<inputtype="checkbox"name="checkbox"id="multi-choiceB"value="B">选项B<br/>
<inputtype="checkbox"name="checkbox"id="multi-choiceC"value="C">选项C<br/>
<inputtype="checkbox"name="checkbox"id="multi-choiceD"value="D">选项D<br/>
<inputtype="submit"value="提交">
</form>
<divid="myDiv"></div>
<scripttype="text/javascript">
que="<?phpecho$que;?>";
answer="<?phpecho$answer;?>";
functioncheck()
{
varqid=document.getElementById("qid").value;
varstr=document.getElementsByName("checkbox");
varanswer="";
for(vari=0;i<str.length;i++)
{
if(str[i].checked==true)
{
answer+=str[i].value;
}
}
if(answer=="")alert('请勾选答案，然后提交');
else
{//用户勾选了相关答案，进行相关处理
varxmlhttp;
xmlhttp=newXMLHttpRequest();
xmlhttp.open("POST",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;
}
};
}
returnfalse;
}
</script>
</body>
</html>

后台function.php

[html] view plain copy

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>koastal</title>
</head>
<body>
<?php
$qid=intval($_POST["qid"]);
$answer=trim($_POST["answer"]);
echo"您提交的题目编号是".$qid."，答案是".$answer;
?>
</form>
</body>
</html>

效果显示：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!