原生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 相关文章推荐
ThinkPHP采用模块和操作分析
Apr 18 PHP
php打造属于自己的MVC框架
Mar 07 PHP
xml在joomla表单中的应用详解分享
Jul 19 PHP
比较strtr, str_replace和preg_replace三个函数的效率
Jun 26 PHP
关于php循环跳出的问题
Jul 01 PHP
一个PHP针对数字的加密解密类
Mar 20 PHP
windwos下使用php连接oracle数据库的过程分享
May 26 PHP
PHP中4种常用的抓取网络数据方法
Jun 04 PHP
PHP排序算法类实例
Jun 17 PHP
PHP实现上传多文件示例代码
Feb 20 PHP
php无限极分类实现方法分析
Jul 04 PHP
Laravel框架Blade模板简介及模板继承用法分析
Dec 03 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
基于jQuery的自动完成插件
2011/02/03 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
JS script脚本中async和defer区别详解
2020/06/24 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
简单介绍Python中的JSON使用
2015/04/28 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python包和模块的分发详细介绍
2020/06/19 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
神路信息Java面试题目
2013/03/31 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
优秀员工事迹材料
2014/12/20 职场文书
二审答辩状格式
2015/05/22 职场文书
2015双创工作总结
2015/07/24 职场文书
高中生军训感言
2015/08/01 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书