原生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 相关文章推荐
php入门学习知识点四 PHP正则表达式基本应用
Jul 14 PHP
php json_encode奇怪问题说明
Sep 27 PHP
PHP以指定字段为索引返回数据库所取的数据数组
Jun 30 PHP
深入Nginx + PHP 缓存详解
Jul 11 PHP
php实现mysql封装类示例
May 07 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
Aug 25 PHP
PHP简单实现断点续传下载的方法
Sep 25 PHP
PHP微信开发之模板消息回复
Jun 24 PHP
PHP微信支付实例解析
Jul 22 PHP
thinkPHP自定义类实现方法详解
Nov 30 PHP
Laravel框架使用Seeder实现自动填充数据功能
Jun 13 PHP
laravel 框架实现无限级分类的方法示例
Oct 31 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
搜索引擎技术核心揭密
2006/10/09 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
python 字典(dict)按键和值排序
2016/06/28 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python中JWT用户认证的实现
2020/05/18 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
Collection和Collections的区别
2016/05/02 面试题
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
新闻人物通讯稿
2014/10/09 职场文书
欢送领导祝酒词
2015/08/12 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
python如何正确使用yield
2021/05/21 Python
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL