彰化一整天的論壇

 找回密碼
 立即註冊
查看: 1834|回復: 1

利用ajax來做輸入時即時回傳結果

[複製鏈接]
發表於 2012-12-7 11:35:57 | 顯示全部樓層 |閱讀模式
本帖最後由 imingho 於 2013-1-15 21:55 編輯

利用ajax來做輸入表單資料時即時回傳結果
這個範例是用陣列來回傳判斷,如果要去資料庫中檢查也是修改這裡,例如Email有使用就回傳"該帳號己有人使用"沒有使用就回傳空值

測試連結: http://bestdaylong.com/html/ajax.htm

1.執行畫面的程式碼
ajax_02.jpg
2.檢查輸入的值並回傳結果的php程式
ajax_03.jpg
3.輸入1-9底下的會顯示相對應的一到九


ajax.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","num.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>輸入數字(1 - 9):</h3>
<form action="">
數字:<input type="text" id="txt1" />
</form>
<p>中文數字:<span id="txtHint"></span></p>
</body>
</html>


num.php

<?
$q=$_GET[q];
$num=",一,二,三,四,五,六,七,八,九";
$nums=split(",",$num);
if($q>0 && $q<10)
  echo $nums[$q];
?>


num.php

131 Bytes, 下載次數: 207

num.php

回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2019-9-21 04:48 , Processed in 0.153498 second(s), 21 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表