原生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 相关文章推荐
程序员编程十条戒律
Jul 09 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
Jul 23 PHP
基于php冒泡排序算法的深入理解
Jun 09 PHP
解析thinkphp import 文件内容变量失效的问题
Jun 20 PHP
解析在apache里面给php写虚拟目录的详细方法
Jun 24 PHP
一漂亮的PHP图片验证码实例
Mar 21 PHP
ThinkPHP实现带验证码的文件上传功能实例
Nov 01 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
Apr 17 PHP
php判断用户是否手机访问代码
Jun 08 PHP
PHP中使用foreach()遍历二维数组的简单实例
Jun 13 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
May 25 PHP
Laravel框架自定义分页样式操作示例
Jan 26 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
2021年最新CPU天梯图
2021/03/04 数码科技
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
Yii分页用法实例详解
2014/12/04 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Servlet方面面试题
2016/09/28 面试题
毕业生自荐书
2014/02/02 职场文书
贷款承诺书范文
2014/05/19 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript