当前位置:首页 > PHP教程 > php应用 > 列表

原生JS实现Ajax通过GET方式与PHP进行交互操作示例

发布:smiling 来源: PHP粉丝网  添加日期:2018-06-11 09:48:24 浏览: 评论:0 

本文实例讲述了原生JS实现Ajax通过GET方式与PHP进行交互操作,分享给大家供大家参考,具体如下.

一、代码 conn.php

  1. <?php 
  2.    $conn=mysql_connect("localhost","root","root"or die("数据库连接失败".mysql_error()); 
  3.    mysql_select_db("db_database27",$connor die("数据库连接失败".mysql_error()); 
  4.    mysql_query("set names gb2312"); 
  5. ?> 

index.php

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>通过XMLHttpRequest对象读取HTML文件,并且输出读取结果</title> 
  6. <style type="text/<a href="http://www.111cn.net/cssdiv/css.html" class="anchor" target="_blank">css</a>"> 
  7. <!-- 
  8. body { 
  9.   margin-left: 0px; 
  10.   margin-top: 00px; 
  11.   margin-right: 0px; 
  12.   margin-bottom: 0px; 
  13. --> 
  14. </style></head> 
  15. <script> 
  16. var xmlHttp;        //定义XMLHttpRequest对象 
  17. function createXmlHttpRequestObject(){ 
  18.   //如果在internet Explorer下运行 
  19.   if(window.ActiveXObject){ 
  20.     try{ 
  21.       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  22.     }catch(e){ 
  23.       xmlHttp=false
  24.     } 
  25.   }else{ 
  26.   //如果在Mozilla或其他的浏览器下运行 
  27.     try{ 
  28.       xmlHttp=new XMLHttpRequest(); 
  29.     }catch(e){ 
  30.       xmlHttp=false
  31.     } 
  32.   } 
  33.    //返回创建的对象或显示错误信息 
  34.   if(!xmlHttp) 
  35.     alert("返回创建的对象或显示错误信息"); 
  36.     else 
  37.     return xmlHttp; 
  38. function showsimple(){ 
  39.   createXmlHttpRequestObject(); 
  40.   var cont = document.getElementById("searchtxt").value; 
  41.   if(cont==""){ 
  42.     alert('查询关键字不能为空!'); 
  43.     return false; 
  44.   } 
  45.     xmlHttp.onreadystatechange=StatHandler; //判断URL调用的状态值并处理 
  46.     xmlHttp.open("GET",'searchrst.php?cont='+cont,false); 
  47.     xmlHttp.send(null); 
  48. function StatHandler(){ 
  49.   if(xmlHttp.readyState==4 && xmlHttp.status==200){ 
  50.     document.getElementById("webpage").innerHTML=xmlHttp.responseText; 
  51.   } 
  52. </script> 
  53. <body> 
  54. <table width="800" height="632" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bj.jpg"> 
  55.  <tr> 
  56.   <td width="260" height="245"> </td> 
  57.   <td width="500" align="center" valign="bottom"><strong>查询员工信息,根据员工技能信息</strong></td> 
  58.   <td width="40"> </td> 
  59.  </tr><form id="searchform" name="searchform" method="get" action="#"> 
  60.  <tr> 
  61.   <td height="40"> </td> 
  62.   <td align="center">请输入关键字: <input name="searchtxt" type="text" id="searchtxt" size="30" /> 
  63.     <input id="s_search" name="s_search" type="button" value="查询" onclick="return showsimple()" /></td> 
  64.   <td> </td> 
  65.  </tr> </form> 
  66.  <tr> 
  67.   <td height="268"> </td> 
  68.   <td align="center" valign="top"><div id="webpage"></div></td> 
  69.   <td> </td> 
  70.  </tr> 
  71.  <tr> 
  72.   <td> </td> 
  73.   <td> </td> 
  74.   <td> </td> 
  75.  </tr> 
  76. </table> 
  77. </body> 
  78. </html> 

searchrst.php

  1. <?php 
  2. header('Content-type: text/html;charset=GB2312');        //指定发送数据的编码格式 
  3.   include_once 'conn/conn.php';                //连接数据库 
  4.     $cont = $_GET['cont'];                 //获取Ajax传递的查询关键字 
  5.     if(!emptyempty($_GET['cont'])){               //判断如果关键字不为空 
  6.       $sql = "select * from tb_administrator where explains like '%".$cont."%'"//定义SQL语句 
  7.       $result=mysql_query($sql,$conn);          //执行模糊查询 
  8.       if(mysql_num_rows($result)>0){        //获取查询结果 
  9.         echo "<table width='500' border='1' cellpadding='1' cellspacing='1' bordercolor='#FFFFCC' bgcolor='#666666'>"
  10.         echo "<tr><td height='30' align='center' bgcolor='#FFFFFF'>ID</td><td align='center' bgcolor='#FFFFFF'>名称</td><td align='center' bgcolor='#FFFFFF'>编号</td><td align='center' bgcolor='#FFFFFF'>描述</td></tr>"
  11.  while($myrow=mysql_fetch_array($result)){           //循环输出查询结果 
  12.  echo "<tr><td height='22' bgcolor='#FFFFFF'>".$myrow[id]."</td>"
  13.  echo "<td bgcolor='#FFFFFF'>".$myrow[user]."</td>"
  14.   echo "<td bgcolor='#FFFFFF'>".$myrow[number]."</td>"
  15. echo "<td bgcolor='#FFFFFF'>".$myrow[explains]."</td>"
  16. echo "</tr>"
  17. echo "</table>"
  18.       }else
  19.       echo "没有符合条件的数据"
  20.       } 
  21.     } 
  22. ?> 

Tags: 示例 方式

分享到: