首页
所有分类
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 相关文章推荐
PHP实现文件安全下载
Oct 09 PHP
PHP+javascript模拟Matrix画面
Oct 09 PHP
php中显示数组与对象的实现代码
Apr 18 PHP
PHP中将ip地址转成十进制数的两种实用方法
Aug 15 PHP
微信公众号开发之微信公共平台消息回复类实例
Nov 14 PHP
PHP实现PDO的mysql数据库操作类
Dec 12 PHP
PHP实现在线阅读PDF文件的方法
Jun 23 PHP
微信公众平台DEMO(PHP)
May 04 PHP
PHP中session跨子域的三种实现方法
Jul 25 PHP
php导出csv文件,可导出前导0实例代码
Nov 16 PHP
浅谈关于PHP解决图片无损压缩的问题
Sep 01 PHP
实例分析PHP中PHPMailer发邮件
Dec 13 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
watch(1) scss(1) vue-router-link(1) 项目打包(2) TimePickerView(1) Yolov5(1) KVM(1) Jmerte(1) 监听(2) vue-cli3.x(1)
You might like
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
css配合jquery美化 select
2013/11/29 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
Python json模块使用实例
2015/04/11 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python常用知识梳理(必看篇)
2017/03/23 Python
详解python中asyncio模块
2018/03/03 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python的concat等多种用法详解
2018/11/28 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Python如何实现转换URL详解
2019/07/02 Python
Python 高效编程技巧分享
2020/09/10 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers