原生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作为网站开发语言的原因分享
Jan 03 PHP
深入php常用函数的使用汇总
Jun 08 PHP
PHP判断远程图片或文件是否存在的实现代码
Feb 20 PHP
php网站被挂木马后的修复方法总结
Nov 06 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
Jun 17 PHP
PHP+jQuery翻板抽奖功能实现
Oct 19 PHP
php 二维数组时间排序实现代码
Nov 19 PHP
YII2 实现多语言配置的方法分享
Jan 11 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
Apr 27 PHP
PHP实现类似于C语言的文件读取及解析功能
Sep 01 PHP
PHP实现动态创建XML文档的方法
Mar 30 PHP
PHP安全之register_globals的on和off的区别
Jul 23 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+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
js使用递归解析xml
2014/12/12 Javascript
JavaScript入门基础
2015/08/12 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
vue写一个组件
2018/04/09 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
python+Django实现防止SQL注入的办法
2019/10/31 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
如何对python的字典进行排序
2020/06/19 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
软件测试面试题
2015/10/21 面试题
汽车维修专业个人求职信范文
2014/01/01 职场文书
群众路线党课主持词
2014/04/01 职场文书
《老山界》教学反思
2014/04/08 职场文书
会计电算化实训报告
2014/11/04 职场文书
MongoDB支持的数据类型
2022/04/11 MongoDB