采用ajax提交POST数据的例子

来源：互联网发布：profili软件介绍编辑：程序博客网时间：2024/05/18 03:12

问题描述

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

提交之后显示的位置：

难点分析

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

[html] view plaincopy
<form action="http://www.baidu.com" onsubmit="return check()">  

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

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

checkbox标签部分：

[html] view plaincopy
<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处理部分：

[html] view plaincopy
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技术与后台进行交互

[html] view plaincopy
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

[html] view plaincopy
<!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

[html] view plaincopy
<!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>  

效果显示：

阅读全文

0 0