原生JS實現(xiàn)Ajax通過POST方式與PHP進(jìn)行交互的方法示

2020-03-22 20:20:54

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了原生JS實現(xiàn)html' target='_blank'>Ajax通過POST方式與PHP進(jìn)行交互的方法,涉及ajax使用post方式與后臺交互及php數(shù)據(jù)接收、處理、查詢數(shù)據(jù)庫等相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了原生JS實現(xiàn)Ajax通過POST方式與PHP進(jìn)行交互的方法。分享給大家供大家參考，具體如下：

一、代碼

conn.php

 ?php $conn=mysql_connect( localhost , root , root ) or die( 數(shù)據(jù)庫連接失敗 .mysql_error()); mysql_select_db( db_database27 ,$conn) or die( 數(shù)據(jù)庫連接失敗 .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進(jìn)行交互 /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) //返回創(chuàng)建的對象或顯示錯誤信息 alert( 返回創(chuàng)建的對象或顯示錯誤信息  else return xmlHttp;function showsimple(){ //創(chuàng)建主控制函數(shù) createXmlHttpRequestObject(); var us = document.getElementById( user ).value; //獲取表單提交的值 var nu = document.getElementById( number ).value; var ex = document.getElementById( explains ).value; if(us== nu== ex== ){ //判斷表單提交的值不能為空 alert( 添加的數(shù)據(jù)不能為空！  return false; var post_method= users= +us+ numbers= +nu+ explaines= +ex; //構(gòu)造URL參數(shù) xmlHttp.open( POST , searchrst.php ,true); //調(diào)用指定的添加文件 xmlHttp.setRequestHeader( Content-Type , application/x-www-form-urlencoded; //設(shè)置請求頭信息 xmlHttp.onreadystatechange=StatHandler; //判斷URL調(diào)用的狀態(tài)值并處理 xmlHttp.send(post_method); //將數(shù)據(jù)發(fā)送給服務(wù)器function StatHandler(){ //定義處理函數(shù) if(xmlHttp.readyState==4 xmlHttp.status==200){ //判斷如果執(zhí)行成功，則輸出下面內(nèi)容 if(xmlHttp.responseText!= ){ alert( 數(shù)據(jù)添加成功！  //將服務(wù)器返回的數(shù)據(jù)定義到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  td width= 260 height= 245 /td  td colspan= 2 align= center valign= bottom strong 查詢員工信息，根據(jù)員工技能信息 /strong /td  td width= 40 /td  /tr form id= searchform name= searchform method= post action= #  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  td height= 25 /td  td align= right 員工編號： /td  td align= left input name= number type= text id= number size= 20 / /td  td /td  /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  td height= 25 /td  td colspan= 2 align= center  input type= button name= Submit value= 提交 quot;showsimple(); /  input type= reset name= Submit2 value= 重置 / /td  td /td  /tr /form  td height= 268 /td  td colspan= 2 align= center valign= top p id= webpage /p /td  td /td  /tr  td /td  td colspan= 2 /td  td /td  /tr  /table  /body  /html

searchrst.php

 ?php header( Content-type: text/html;charset=GB2312 //指定發(fā)送數(shù)據(jù)的編碼格式 include_once conn/conn.php //連接數(shù)據(jù)庫 $user =iconv( UTF-8 , gb2312 ,$_POST[ users //獲取Ajax傳遞的值,并實現(xiàn)字符編碼轉(zhuǎn)換 $number = iconv( UTF-8 , gb2312 ,$_POST[ numbers //獲取Ajax傳遞的值,并實現(xiàn)字符編碼轉(zhuǎn)換 $explains = iconv( UTF-8 , gb2312 ,$_POST[ explaines //獲取Ajax傳遞的值,并實現(xiàn)字符編碼轉(zhuǎn)換 $sql= insert into tb_administrator(user,number,explains)values( $user , $number , $explains )  $result=mysql_query($sql,$conn); //執(zhí)行添加語句 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)){ //循環(huán)輸出查詢結(jié)果 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 ?

二、運行結(jié)果