采用ajax提交POST数据的例子

最新推荐文章于 2024-09-10 22:24:48 发布

renxing518

最新推荐文章于 2024-09-10 22:24:48 发布

阅读量1k

点赞数

分类专栏： ajax

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题描述

我们将一个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>  