採用ajax提交POST資料的例子，ajax提交post例子

採用ajax提交POST資料的例子，ajax提交post例子
問題描述

我們將一個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>

效果顯示：