suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  Native JS implementiert Ajax, um mit PHP über PHP-Kenntnisse mit Beispiel-POST-Methoden zu interagieren

Native JS implementiert Ajax, um mit PHP über PHP-Kenntnisse mit Beispiel-POST-Methoden zu interagieren

jacklove
jackloveOriginal
2018-06-23 16:56:351628Durchsuche

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von nativem JS zur Implementierung von Ajax für die Interaktion mit PHP über POST vorgestellt. Dabei wird Ajax für die Interaktion mit dem Hintergrund und PHP-Datenempfang, -verarbeitung, Datenbankabfrage und anderen damit verbundenen Betriebsfähigkeiten verwendet Bedarf kann darauf verweisen.

Das Beispiel in diesem Artikel beschreibt, wie natives JS Ajax implementiert, um über POST mit PHP zu interagieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1 

<?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. Laufergebnisse

Artikel, die Sie interessieren könnten :

Laravel integriert Geetest-Verifizierungscode-Methode PHP-Beispiel

Phpstorm+Xdebug Breakpoint Debugging PHP-Methode PHP-Beispiel

PHP-Strftime-Funktion, um PHP-Grundlagen für Datum und Uhrzeit zu erhalten


Das obige ist der detaillierte Inhalt vonNative JS implementiert Ajax, um mit PHP über PHP-Kenntnisse mit Beispiel-POST-Methoden zu interagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php laravel ajax phpstorm JS 数据库
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Laravel integriert das PHP-Beispiel der Geetest-BestätigungscodemethodeNächster Artikel：Laravel integriert das PHP-Beispiel der Geetest-Bestätigungscodemethode

In Verbindung stehende Artikel

Mehr sehen