Maison > Article > développement back-end > Native JS implémente Ajax pour interagir avec PHP via un exemple de méthode POST, des compétences php

Native JS implémente Ajax pour interagir avec PHP via un exemple de méthode POST, des compétences php

jackloveoriginal: 2018-06-23 16:56:351573parcourir

Cet article présente principalement la méthode d'utilisation de JS natif pour implémenter Ajax pour interagir avec PHP via POST. Cela implique qu'Ajax utilise POST pour interagir avec la réception, le traitement, la requête de base de données et d'autres compétences opérationnelles connexes dans Friends. besoin peut s'y référer. Suivant

L'exemple de cet article décrit comment JS natif implémente Ajax pour interagir avec PHP via POST. Partagez-le avec tout le monde pour votre référence, comme suit :

1. Code

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(&#39;添加的数据不能为空！&#39;);
    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("数据添加成功！");
      //将服务器返回的数据定义到p中
      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"><p id="webpage"></p></td>
  <td> </td>
 </tr>
 <tr>
  <td> </td>
  <td colspan="2"> </td>
  <td> </td>
 </tr>
</table>
</body>
</html>

searchrst.php

<?php
  header(&#39;Content-type: text/html;charset=GB2312&#39;);      //指定发送数据的编码格式
  include_once &#39;conn/conn.php&#39;;                //连接数据库
  $user =iconv(&#39;UTF-8&#39;,&#39;gb2312&#39;,$_POST[&#39;users&#39;]);       //获取Ajax传递的值,并实现字符编码转换
  $number = iconv(&#39;UTF-8&#39;,&#39;gb2312&#39;,$_POST[&#39;numbers&#39;]);    //获取Ajax传递的值,并实现字符编码转换
  $explains = iconv(&#39;UTF-8&#39;,&#39;gb2312&#39;,$_POST[&#39;explaines&#39;]);  //获取Ajax传递的值,并实现字符编码转换
  $sql="insert into tb_administrator(user,number,explains)values(&#39;$user&#39;,&#39;$number&#39;,&#39;$explains&#39;)";
  $result=mysql_query($sql,$conn);            //执行添加语句
  if($result){
    $sqles="select * from tb_administrator ";
    $results=mysql_query($sqles,$conn);
    echo "<table width=&#39;500&#39; border=&#39;1&#39; cellpadding=&#39;1&#39; cellspacing=&#39;1&#39; bordercolor=&#39;#FFFFCC&#39; bgcolor=&#39;#666666&#39;>";
    echo "<tr><td height=&#39;30&#39; align=&#39;center&#39; bgcolor=&#39;#FFFFFF&#39;>ID</td><td align=&#39;center&#39; bgcolor=&#39;#FFFFFF&#39;>名称</td><td align=&#39;center&#39; bgcolor=&#39;#FFFFFF&#39;>编号</td><td align=&#39;center&#39; bgcolor=&#39;#FFFFFF&#39;>描述</td></tr>";
    while($myrow=mysql_fetch_array($results)){     //循环输出查询结果
      echo "<tr><td height=&#39;22&#39; bgcolor=&#39;#FFFFFF&#39;>".$myrow[id]."</td>";
      echo "<td bgcolor=&#39;#FFFFFF&#39;>".$myrow[user]."</td>";
      echo "<td bgcolor=&#39;#FFFFFF&#39;>".$myrow[number]."</td>";
      echo "<td bgcolor=&#39;#FFFFFF&#39;>".$myrow[explains]."</td>";
      echo "</tr>";
    }
    echo "</table>";
  }
?>

2.Résultats en cours

Vous l'êtes peut-être Articles intéressés :

Méthode Laravel d'intégration du code de vérification Geetest, exemple php

Phpstorm+Xdebug débogage du point d'arrêt, méthode PHP, exemple php

Fonction php strftime pour obtenir les bases de la date et de l'heure

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php laravel ajax phpstorm JS 数据库

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Laravel intègre l'exemple php de la méthode de code de vérification GeetestArticle suivant：Laravel intègre l'exemple php de la méthode de code de vérification Geetest

Articles Liés

Voir plus