• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
们至熟两创 显示全部楼层 发表于 2021-10-25 20:13:02 |阅读模式 打印 上一主题 下一主题
本文实例讲述了原生JS实现Ajax通过POST方式与PHP进行交互的方法。分享给大家供大家参考,具体如下:
一、代码
conn.php
  1. <?php
  2.    $conn=mysql_connect("localhost","root","root") or die("数据库连接失败".mysql_error());
  3.    mysql_select_db("db_database27",$conn) or die("数据库连接失败".mysql_error());
  4.    mysql_query("set names gb2312");
  5. ?>
复制代码
index.php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>通过POST方式与PHP进行交互</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.   margin-left: 0px;
  10.   margin-top: 00px;
  11.   margin-right: 0px;
  12.   margin-bottom: 0px;
  13. }
  14. -->
  15. </style></head>
  16. <script>
  17. var xmlHttp;                  //定义XMLHttpRequest对象
  18. function createXmlHttpRequestObject(){
  19.     if(window.ActiveXObject){          //如果在internet Explorer下运行
  20.       try{
  21.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  22.       }catch(e){
  23.         xmlHttp=false;
  24.       }
  25.     }else{
  26.       try{                  //如果在Mozilla或其他的浏览器下运行
  27.         xmlHttp=new XMLHttpRequest();
  28.       }catch(e){
  29.         xmlHttp=false;
  30.       }
  31.     }
  32.     if(!xmlHttp)                //返回创建的对象或显示错误信息
  33.       alert("返回创建的对象或显示错误信息");
  34.     else
  35.       return xmlHttp;
  36. }
  37. function showsimple(){               //创建主控制函数
  38.   createXmlHttpRequestObject();
  39.   var us = document.getElementById("user").value;   //获取表单提交的值
  40.   var nu = document.getElementById("number").value;
  41.   var ex = document.getElementById("explains").value;
  42.   if(us=="" && nu=="" && ex==""){         //判断表单提交的值不能为空
  43.     alert('添加的数据不能为空!');
  44.     return false;
  45.   }
  46.   var post_method="users="+us+"&numbers="+nu+"&explaines="+ex;    //构造URL参数
  47.   xmlHttp.open("POST","searchrst.php",true);           //调用指定的添加文件
  48.   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");  //设置请求头信息
  49.   xmlHttp.onreadystatechange=StatHandler;     //判断URL调用的状态值并处理
  50.   xmlHttp.send(post_method);           //将数据发送给服务器
  51. }
  52. function StatHandler(){               //定义处理函数
  53.   if(xmlHttp.readyState==4 && xmlHttp.status==200){    //判断如果执行成功,则输出下面内容
  54.     if(xmlHttp.responseText!=""){
  55.       alert("数据添加成功!");
  56.       //将服务器返回的数据定义到DIV中
  57.       document.getElementById("webpage").innerHTML=xmlHttp.responseText;
  58.     }else{
  59.       alert("添加失败!");           //如果返回值为空
  60.     }
  61.   }
  62. }
  63. </script>
  64. <body>
  65. <table width="800" height="632" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bj.jpg">
  66. <tr>
  67.   <td width="260" height="245">&nbsp;</td>
  68.   <td colspan="2" align="center" valign="bottom"><strong>查询员工信息,根据员工技能信息</strong></td>
  69.   <td width="40">&nbsp;</td>
  70. </tr><form id="searchform" name="searchform" method="post" action="#">
  71. <tr>
  72.   <td height="25">&nbsp;</td>
  73.   <td width="150" align="right">员工姓名:   </td>
  74.   <td width="350" align="left"><input name="user" type="text" id="user" size="30" /></td>
  75.   <td>&nbsp;</td>
  76. </tr>
  77. <tr>
  78.   <td height="25">&nbsp;</td>
  79.   <td align="right">员工编号:   </td>
  80.   <td align="left"><input name="number" type="text" id="number" size="20" /></td>
  81.   <td>&nbsp;</td>
  82. </tr>
  83. <tr>
  84.   <td height="25">&nbsp;</td>
  85.   <td align="right">技能描述:   </td>
  86.   <td align="left"><textarea name="explains" cols="40" rows="3" id="explains"></textarea></td>
  87.   <td>&nbsp;</td>
  88. </tr>
  89. <tr>
  90.   <td height="25">&nbsp;</td>
  91.   <td colspan="2" align="center">
  92.   <input type="button" name="Submit" value="提交" onclick="showsimple();" />&nbsp;&nbsp;
  93.   <input type="reset" name="Submit2" value="重置" /></td>
  94.   <td>&nbsp;</td>
  95. </tr> </form>
  96. <tr>
  97.   <td height="268">&nbsp;</td>
  98.   <td colspan="2" align="center" valign="top"><div id="webpage"></div></td>
  99.   <td>&nbsp;</td>
  100. </tr>
  101. <tr>
  102.   <td>&nbsp;</td>
  103.   <td colspan="2">&nbsp;</td>
  104.   <td>&nbsp;</td>
  105. </tr>
  106. </table>
  107. </body>
  108. </html>
复制代码
searchrst.php
  1. <?php
  2.   header('Content-type: text/html;charset=GB2312');      //指定发送数据的编码格式
  3.   include_once 'conn/conn.php';                //连接数据库
  4.   $user =iconv('UTF-8','gb2312',$_POST['users']);       //获取Ajax传递的值,并实现字符编码转换
  5.   $number = iconv('UTF-8','gb2312',$_POST['numbers']);    //获取Ajax传递的值,并实现字符编码转换
  6.   $explains = iconv('UTF-8','gb2312',$_POST['explaines']);  //获取Ajax传递的值,并实现字符编码转换
  7.   $sql="insert into tb_administrator(user,number,explains)values('$user','$number','$explains')";
  8.   $result=mysql_query($sql,$conn);            //执行添加语句
  9.   if($result){
  10.     $sqles="select * from tb_administrator ";
  11.     $results=mysql_query($sqles,$conn);
  12.     echo "<table width='500' border='1' cellpadding='1' cellspacing='1' bordercolor='#FFFFCC' bgcolor='#666666'>";
  13.     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>";
  14.     while($myrow=mysql_fetch_array($results)){     //循环输出查询结果
  15.       echo "<tr><td height='22' bgcolor='#FFFFFF'>".$myrow[id]."</td>";
  16.       echo "<td bgcolor='#FFFFFF'>".$myrow[user]."</td>";
  17.       echo "<td bgcolor='#FFFFFF'>".$myrow[number]."</td>";
  18.       echo "<td bgcolor='#FFFFFF'>".$myrow[explains]."</td>";
  19.       echo "</tr>";
  20.     }
  21.     echo "</table>";
  22.   }
  23. ?>
复制代码
二、运行结果

更多关于PHP相干内容感兴趣的读者可查察本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP根本语法入门教程》、《php面向对象程序计划入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操纵入门教程》及《php常见数据库操纵技巧汇总》
盼望本文所述对大家PHP程序计划有所帮助。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作