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


Posted in PHP onMay 12, 2018

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

一、代码

conn.php

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

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过XMLHttpRequest对象读取HTML文件,并且输出读取结果</title>
<style type="text/css">
<!--
body {
  margin-left: 0px;
  margin-top: 00px;
  margin-right: 0px;
  margin-bottom: 0px;
}
-->
</style></head>
<script>
var xmlHttp;        //定义XMLHttpRequest对象
function createXmlHttpRequestObject(){
  //如果在internet Explorer下运行
  if(window.ActiveXObject){
    try{
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
      xmlHttp=false;
    }
  }else{
  //如果在Mozilla或其他的浏览器下运行
    try{
      xmlHttp=new XMLHttpRequest();
    }catch(e){
      xmlHttp=false;
    }
  }
   //返回创建的对象或显示错误信息
  if(!xmlHttp)
    alert("返回创建的对象或显示错误信息");
    else
    return xmlHttp;
}
function showsimple(){
  createXmlHttpRequestObject();
  var cont = document.getElementById("searchtxt").value;
  if(cont==""){
    alert('查询关键字不能为空!');
    return false;
  }
    xmlHttp.onreadystatechange=StatHandler; //判断URL调用的状态值并处理
    xmlHttp.open("GET",'searchrst.php?cont='+cont,false);
    xmlHttp.send(null);
}
function StatHandler(){
  if(xmlHttp.readyState==4 && xmlHttp.status==200){
    document.getElementById("webpage").innerHTML=xmlHttp.responseText;
  }
}
</script>
<body>
<table width="800" height="632" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bj.jpg">
 <tr>
  <td width="260" height="245"> </td>
  <td width="500" align="center" valign="bottom"><strong>查询员工信息,根据员工技能信息</strong></td>
  <td width="40"> </td>
 </tr><form id="searchform" name="searchform" method="get" action="#">
 <tr>
  <td height="40"> </td>
  <td align="center">请输入关键字: <input name="searchtxt" type="text" id="searchtxt" size="30" />
    <input id="s_search" name="s_search" type="button" value="查询" onclick="return showsimple()" /></td>
  <td> </td>
 </tr> </form>
 <tr>
  <td height="268"> </td>
  <td align="center" valign="top"><div id="webpage"></div></td>
  <td> </td>
 </tr>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>
</body>
</html>

searchrst.php

<?php
header('Content-type: text/html;charset=GB2312');        //指定发送数据的编码格式
  include_once 'conn/conn.php';                //连接数据库
    $cont = $_GET['cont'];                 //获取Ajax传递的查询关键字
    if(!empty($_GET['cont'])){               //判断如果关键字不为空
      $sql = "select * from tb_administrator where explains like '%".$cont."%'"; //定义SQL语句
      $result=mysql_query($sql,$conn);          //执行模糊查询
      if(mysql_num_rows($result)>0){        //获取查询结果
        echo "<table width='500' border='1' cellpadding='1' cellspacing='1' bordercolor='#FFFFCC' bgcolor='#666666'>";
        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>";
 while($myrow=mysql_fetch_array($result)){           //循环输出查询结果
 echo "<tr><td height='22' bgcolor='#FFFFFF'>".$myrow[id]."</td>";
 echo "<td bgcolor='#FFFFFF'>".$myrow[user]."</td>";
  echo "<td bgcolor='#FFFFFF'>".$myrow[number]."</td>";
echo "<td bgcolor='#FFFFFF'>".$myrow[explains]."</td>";
echo "</tr>";
}
echo "</table>";
      }else{
      echo "没有符合条件的数据";
      }
    }
?>

二、运行结果

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

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
用PHP4访问Oracle815
Oct 09 PHP
谈谈新手如何学习PHP 默默经典版本
Aug 04 PHP
ajax+php打造进度条 readyState各状态
Mar 20 PHP
$_GET['goods_id']+0 的使用详解
Jun 06 PHP
浅析php header 跳转
Jun 17 PHP
浅析memcache启动以及telnet命令详解
Jun 28 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
Aug 18 PHP
php实现阳历阴历互转的方法
Oct 28 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
May 26 PHP
php5.3后静态绑定用法详解
Nov 11 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
Sep 21 PHP
通过PHP实现获取访问用户IP
May 09 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
May 12 #PHP
Laravel框架实现model层的增删改查(CURD)操作示例
May 12 #PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
May 12 #PHP
PHP折半(二分)查找算法实例分析
May 12 #PHP
PHP区块查询实现方法分析
May 12 #PHP
可兼容php5与php7的cURL文件上传功能实例分析
May 11 #PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
May 11 #PHP
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
PHP Socket 编程
2010/04/09 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
js 省地市级联选择
2010/02/07 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
Python global全局变量函数详解
2018/09/18 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python range实例用法分享
2020/02/06 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
团代会宣传工作方案
2014/05/08 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
清洁工工作总结
2015/08/11 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
Python字符串格式化方式
2022/04/07 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android