ajax執行個體告訴你ajax應用

ajx.php教程
<?php
$link=mysql_connect("localhost","root","root");

• mysql_select_db("abd",$link);
• $gb2312string=iconv( 'utf-8', 'gb2312//ignore' , $requestajaxstring);   //ajax中先用encodeuricomponent對要提交的中文進行編碼
• mysql_query("set names gb2312");
• $name=$_get[name];
• if($name){
• $sql=mysql_query("select * from stu where name='".$name."'");
• $info=mysql_fetch_array($sql);
• header('content-type: text/html;charset=gb2312');  //指定發送資料的編碼格式為gb2312
• if (!$info){
•   echo "無記錄!";
• }else{  echo $info[sheng]; }
• }
• ?>

複製代碼

test.php

• <script language="javascript">
• var http_request = false;
• function createrequest(url) {
• //初始化對象並發出xmlhttprequest請求
• http_request = false;
• if (window.xmlhttprequest) {           //mozilla等其他瀏覽器
•   http_request = new xmlhttprequest();
•   if (http_request.overridemimetype) {
•    http_request.overridemimetype("text/xml");
•   }
• } else if (window.activexobject) {         //ie瀏覽器
•   try {
•    http_request = new activexobject("msxml2.xmlhttp");
•   } catch (e) {
•    try {
•     http_request = new activexobject("microsoft.xmlhttp");
•      } catch (e) {}
•   }
• }
• if (!http_request) {
•   //alert("不能建立xmlhttp執行個體!");
•   return false;
• }
• http_request.onreadystatechange = alertcontents;         //指定回應程式法
•  
• http_request.open("get", url, true);         //發出http請求
• http_request.send(null);
• }
• function alertcontents() {               //處理伺服器返回的資訊
• if (http_request.readystate == 4) {
• var objhelpid = document.getelementbyid("usernamehelp");
• var objhelp1id = document.getelementbyid("usernamehelp1");
•    if (http_request.responsetext != ""){objhelp1id.innerhtml = http_request.responsetext;objhelpid.innerhtml = "";}
•    else{objhelpid.innerhtml = http_request.responsetext;objhelp1id.innerhtml = "";}
• }
• }
• </script>
• <script language="javascript">
• function checkname() {
• var name = form1.name.value;
•  
•  
• if(name=="") {
•   window.alert("請填寫使用者名!");
•   form1.name.focus();
•   return false;
• }
• else {
•   createrequest('ajx.php?name='+name+'&nocache='+new date().gettime());
• }
• }
•  
• </script><form name="form1" method="post" action="post.php">
•    <table>
•    <tr>
•    <td>姓名<input type="text" name="name" size="20" onchange="checkname()"/></td>
•    <td>分數<input type="text" name="fen" size="20" /><div id="usernamehelp1" style="color:blue; float:right"></div></td>
•    <td ><input type="button" value="刪除" /></td>
•    </tr>
•  
•    <tr>
•    <td></td>
•    <td><input style="display:none" id="clear_all" type="button" value="清除所有內容" /><input type="submit" name="submit" value="提交"></td>
•    </tr>
•    </table>

複製代碼

資料庫教程

• create table `stu` (
•   `id` int(11) not null auto_increment,
•   `name` varchar(20) not null,
•   `fen` varchar(20) not null,
•   `sheng` varchar(20) not null,
•   unique key `id` (`id`)
• ) engine=myisam  default charset=utf8 auto_increment=3 ;
•  
• --
• -- 匯出表中的資料 `stu`
• --
•  
• insert into `stu` values (1, 'zz3', '', '北京');
• insert into `stu` values (2, 'li4', '', '山東');

複製代碼

運行效果

當輸入一個人名如果資料庫中存在  則返回此人所屬的省份
--------------------------------------------------------------------------------
但這不是我想要得   我想要得效果是 如下圖

也就是將ajax  和jquery的動態建立表格  糅合到一塊兒

為了減少高手師傅的寶貴時間   我把代碼上傳了（[url=thread-210393-1-1.html]http://bbs.phpchina.com/thread-210393-1-1.html[/url] ）動態建立表格就是 ok.php這個檔案
單個表格的ajax  就是test.php  的哪個效果
就是想把ajax和動態表格的優點合起來  每輸入一個姓名  如果資料庫裡有  則返回地址   如果沒有則返回  無記錄

痛點：由於表格是一個數組 name[]  所以ajax的返回也應是一個數組<div id="usernamehelp1[]" style="color:blue; float:right"></div>

 

看一款執行個體

 

<script language="javascript">
 
 window.onload = function()
 {
  createdateselect();
 }

 var xmlhttp = false;
 var e;
 
 //建立xmlhttp對象
 function getxmlhttpobj()
 {
  var c = null;
  try
  {
   c = new activexobject("msxml2.xmlhttp");
  }
  catch(e)
  {
   try
   {
    c = new activexobject("microsoft.xmlhttp");
   }
   catch(sc)
   {
    c = null;
   }
  }
 
  if( !c && typeof xmlhttprequest != "undefined" )
  {
   c = new xmlhttprequest();
  }
 
  return c;
 }
 
 //調用遠程方法
 function callserver(e)
 {
  try
  {
   if( xmlhttp && xmlhttp .readystate != 0 )
   {
    xmlhttp.abort();
   }
  
   xmlhttp = getxmlhttpobj();
  
   if( xmlhttp )
   {
    document.getelementbyid("outgroup").style.display = "none";
    //擷取查詢日期
    var datesele = e.options[e.selectedindex].value;
    document.getelementbyid("date").innerhtml = datesele + " 開放式基金淨值";

    //構造查詢連接字串
    var url = "http://www.111cn.net/?newenddate=" + datesele;
   
    //開啟串連
    xmlhttp.open("get", url, true);
    //設定回呼函數
    xmlhttp.onreadystatechange = updatepage;
    //發送請求
    xmlhttp.send(null);
   }
   else
   {
    document.getelementbyid("flag").innerhtml = "xmlhttp對象建立失敗";
   }
  }
  catch (e)
  {
   document.getelementbyid("flag").innerhtml = "查詢錯誤:" + e;
  }
 }
 
 //回調處理函數
 function updatepage()
 {
  try {
   if (xmlhttp.readystate == 1)
   {
    document.getelementbyid("flag").innerhtml = "正在載入連線物件......";
   }

   if (xmlhttp.readystate == 2)
   {
    document.getelementbyid("flag").innerhtml = "連線物件載入完畢。";
   }

   if (xmlhttp.readystate == 3)
   {
    document.getelementbyid("flag").innerhtml = "資料擷取中......";
   }

   if (xmlhttp.readystate == 4)
   {
    var response = xmlhttp.responsetext;
    var openvalue = response.split("<td class="info-head" width="400" valign="top">")[1];
    var openvalue = openvalue.split("</td></tr>")[0];
    //alert(openvalue);
    document.getelementbyid("out").innerhtml = openvalue;
   
    var openvalue1 = response.split("<td class="info-head" width="400" valign="top">")[2];
    var openvalue1 = openvalue1.split("</td></tr>")[0];
    document.getelementbyid("out1").innerhtml = openvalue1;
   
    var openvalue2 = response.split("<td class="info-head" width="400" valign="top">")[3];
    var openvalue2 = openvalue2.split("</td></tr>")[0];
    document.getelementbyid("out2").innerhtml = openvalue2;
   
    var openvalue3 = response.split("<td class="info-head" width="400" valign="top">")[4];
    var openvalue3 = openvalue3.split("</td></tr>")[0];
    document.getelementbyid("out3").innerhtml = openvalue3;
    document.getelementbyid("flag").innerhtml = "查詢結束";

                                document.getelementbyid("outgroup").style.display = "";
   }
  }
  catch (e)
  {
      document.getelementbyid("flag").innerhtml = "回調處理錯誤:" + e;
  }
 }