首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

原生JS实现Ajax通过POST方式与PHP进行交互的方法示例

Posted in PHP onMay 12, 2018

本文实例讲述了原生JS实现Ajax通过POST方式与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>通过POST方式与PHP进行交互</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(){
    if(window.ActiveXObject){          //如果在internet Explorer下运行
      try{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){
        xmlHttp=false;
      }
    }else{
      try{                  //如果在Mozilla或其他的浏览器下运行
        xmlHttp=new XMLHttpRequest();
      }catch(e){
        xmlHttp=false;
      }
    }
    if(!xmlHttp)                //返回创建的对象或显示错误信息
      alert("返回创建的对象或显示错误信息");
    else
      return xmlHttp;
}
function showsimple(){               //创建主控制函数
  createXmlHttpRequestObject();
  var us = document.getElementById("user").value;   //获取表单提交的值
  var nu = document.getElementById("number").value;
  var ex = document.getElementById("explains").value;
  if(us=="" && nu=="" && ex==""){         //判断表单提交的值不能为空
    alert('添加的数据不能为空！');
    return false;
  }
  var post_method="users="+us+"&numbers="+nu+"&explaines="+ex;    //构造URL参数
  xmlHttp.open("POST","searchrst.php",true);           //调用指定的添加文件
  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");  //设置请求头信息
  xmlHttp.onreadystatechange=StatHandler;     //判断URL调用的状态值并处理
  xmlHttp.send(post_method);           //将数据发送给服务器
}
function StatHandler(){               //定义处理函数
  if(xmlHttp.readyState==4 && xmlHttp.status==200){    //判断如果执行成功，则输出下面内容
    if(xmlHttp.responseText!=""){
      alert("数据添加成功！");
      //将服务器返回的数据定义到DIV中
      document.getElementById("webpage").innerHTML=xmlHttp.responseText;
    }else{
      alert("添加失败！");           //如果返回值为空
    }
  }
}
</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 colspan="2" align="center" valign="bottom"><strong>查询员工信息，根据员工技能信息</strong></td>
  <td width="40"> </td>
 </tr><form id="searchform" name="searchform" method="post" action="#">
 <tr>
  <td height="25"> </td>
  <td width="150" align="right">员工姓名：   </td>
  <td width="350" align="left"><input name="user" type="text" id="user" size="30" /></td>
  <td> </td>
 </tr>
 <tr>
  <td height="25"> </td>
  <td align="right">员工编号：   </td>
  <td align="left"><input name="number" type="text" id="number" size="20" /></td>
  <td> </td>
 </tr>
 <tr>
  <td height="25"> </td>
  <td align="right">技能描述：   </td>
  <td align="left"><textarea name="explains" cols="40" rows="3" id="explains"></textarea></td>
  <td> </td>
 </tr>
 <tr>
  <td height="25"> </td>
  <td colspan="2" align="center">
  <input type="button" name="Submit" value="提交" onclick="showsimple();" />  
  <input type="reset" name="Submit2" value="重置" /></td>
  <td> </td>
 </tr> </form>
 <tr>
  <td height="268"> </td>
  <td colspan="2" align="center" valign="top"><div id="webpage"></div></td>
  <td> </td>
 </tr>
 <tr>
  <td> </td>
  <td colspan="2"> </td>
  <td> </td>
 </tr>
</table>
</body>
</html>

searchrst.php

<?php
  header('Content-type: text/html;charset=GB2312');      //指定发送数据的编码格式
  include_once 'conn/conn.php';                //连接数据库
  $user =iconv('UTF-8','gb2312',$_POST['users']);       //获取Ajax传递的值,并实现字符编码转换
  $number = iconv('UTF-8','gb2312',$_POST['numbers']);    //获取Ajax传递的值,并实现字符编码转换
  $explains = iconv('UTF-8','gb2312',$_POST['explaines']);  //获取Ajax传递的值,并实现字符编码转换
  $sql="insert into tb_administrator(user,number,explains)values('$user','$number','$explains')";
  $result=mysql_query($sql,$conn);            //执行添加语句
  if($result){
    $sqles="select * from tb_administrator ";
    $results=mysql_query($sqles,$conn);
    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($results)){     //循环输出查询结果
      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>";
  }
?>

二、运行结果

原生JS实现Ajax通过POST方式与PHP进行交互的方法示例

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

原生JS实现Ajax通过POST方式与PHP进行交互的方法示例

- Author -

chengqiuming

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
discuz安全提问算法
Jun 06 PHP
台湾中原大学php教程孙仲岳主讲
Jan 07 PHP
php 动态执行带有参数的类方法
Apr 10 PHP
php 计算两个时间戳相隔的时间的函数(小时)
Dec 18 PHP
IP138 IP地址查询小偷实现代码
Feb 15 PHP
PHP安全技术之 实现php基本安全
Sep 04 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
Jul 15 PHP
PHP使用http_build_query()构造URL字符串的方法
Apr 02 PHP
PHP7.1实现的AES与RSA加密操作示例
Jun 15 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
Aug 21 PHP
php fread函数使用方法总结
May 28 PHP
PHP 文件写入和读取操作实例详解【必看篇】
Nov 04 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
May 12 #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
Navicat(1) 内置函数(1) 自定义函数(1) harbor(1) commit(1) procedure(1) Tablespace(1) GoFrame(3) V Rising(1) maven(2)
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php面向对象全攻略 （九）访问类型
2009/09/30 PHP
php简单提示框alert封装函数
2010/08/08 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
javascript数组的使用
2013/03/28 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
深入探寻javascript定时器
2015/01/02 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
Java中int与integer的区别（基本数据类型与引用数据类型）
2017/02/19 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
车辆工程专业求职信
2014/06/14 职场文书
科学发展观活动总结
2014/08/28 职场文书
家长学校教学计划
2015/01/19 职场文书
我是特种兵观后感
2015/06/11 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python