原生JS如何实现Ajax通过POST方式与PHP进行交互的方法
发布时间：-04-20 11:28:22
来源：亿速云
阅读：52
作者：小新
这篇文章将为大家详细讲解有关原生JS如何实现Ajax通过POST方式与PHP进行交互的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
js的作用是什么
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。
本文实例讲述了原生JS实现Ajax通过POST方式与PHP进行交互的方法。分享给大家供大家参考，具体如下：
一、代码
conn.php<?php
$conn=mysql_connect("localhost","root","root")ordie("数据库连接失败".mysql_error());
mysql_select_db("db_database27",$conn)ordie("数据库连接失败".mysql_error());
mysql_query("setnamesgb2312");
?>
index.phphtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
通过POST方式与PHP进行交互
varxmlHttp;//定义XMLHttpRequest对象
functioncreateXmlHttpRequestObject(){
if(window.ActiveXObject){//如果在internetExplorer下运行
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp=false;
}
}else{
try{//如果在Mozilla或其他的浏览器下运行
xmlHttp=newXMLHttpRequest();
}catch(e){
xmlHttp=false;
}
}
if(!xmlHttp)//返回创建的对象或显示错误信息
alert("返回创建的对象或显示错误信息");
else
returnxmlHttp;
}
functionshowsimple(){//创建主控制函数
createXmlHttpRequestObject();
varus=document.getElementById("user").value;//获取表单提交的值
varnu=document.getElementById("number").value;
varex=document.getElementById("explains").value;
if(us==""&&nu==""&&ex==""){//判断表单提交的值不能为空
alert('添加的数据不能为空！');
returnfalse;
}
varpost_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);//将数据发送给服务器
}
functionStatHandler(){//定义处理函数
if(xmlHttp.readyState==4&&xmlHttp.status==200){//判断如果执行成功，则输出下面内容
if(xmlHttp.responseText!=""){
alert("数据添加成功！");
//将服务器返回的数据定义到DIV中
document.getElementById("webpage").innerHTML=xmlHttp.responseText;
}else{
alert("添加失败！");//如果返回值为空
}
}
}
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="insertintotb_administrator(user,number,explains)values('$user','$number','$explains')";
$result=mysql_query($sql,$conn);//执行添加语句
if($result){
$sqles="select*fromtb_administrator";
$results=mysql_query($sqles,$conn);
echo"
echo"
ID名称编号描述";
while($myrow=mysql_fetch_array($results)){//循环输出查询结果
echo"
".$myrow[id]."";
echo"
".$myrow[user]."";
echo"
".$myrow[number]."";
echo"
".$myrow[explains]."";
echo"
";
}
echo"
";
}
?>
二、运行结果
关于“原生JS如何实现Ajax通过POST方式与PHP进行交互的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
