首页 > 后端开发 > php教程 > Ajax和PHP实例分析

Ajax和PHP实例分析

小云云
发布: 2023-03-21 07:24:02
原创
1639 人浏览过

本文主要和大家分享Ajax和PHP实例分析,希望本文代码能帮助到大家。

表单:

 用户名:<input type="text" id="username" value="" />
 密码:<input type="password" id="password" value="" />
 <br /><br />
 <input type="submit" id="update" name="提交" />
登录后复制

JavaScript之Ajax请求

var update = document.getElementById("update");

update.onclick = function(){
	var username = document.getElementById("username").value;
	var pass = document.getElementById("password").value;

//步骤1:创建Ajax对象
if(window.XMLHttpRequest){
	var ajax = new XMLHttpRequest();//在主流浏览器下创建Ajax对象
}else{
	var ajax = new ActiveXObject("Microsoft.xmlhttp");//在IE浏览器下创建Ajax对象
}
 //步骤2:开启ajax
/**************get方式***********/
var url = "http://localhost/test/get.php?username="+username+"&password="+pass;
 ajax.open("GET",url,true);
//步骤3:发送数据(请求)
 ajax.send();
/******post方式*******/
// ajax.open("POST","dealDate.php",true);
// //请求过程中数据的编码格式(POST专用操作)
// ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// var parameter = "username="+username+"&password="+pass;
// ajax.send(parameter);

//步骤4:等待接收数据

/*Ajax对象在执行过程中伴随着状态的切换,共存有5中状态的切换
 0.代表Ajax对象的创建,但是未调用open方法
 1.代表Ajax对象调用open方法,但是未调用send方法
 2.代表Ajax对象调用send方法,但是还没有接收到数据
 3.代表Ajax对象正在接收数据
 4.代表Ajax对象接收数据完成
*/
ajax.onreadystatechange = function(){
	if(ajax.readyState == 4){
		 if(ajax.status >= 200 && ajax.status < 300 || ajax.status == 304){
		 //输出服务器返回的数据,但是该数据必须是通过echo输出的文本数据
			var p = document.createElement("p");
			p.innerHTML = ajax.responseText;
			document.body.appendChild(p);
		}
	}
}
 
 }
登录后复制

后台PHP接收到数据:

<?php
header("Content-type:text/html;charset=utf-8");//显示中文
$user = $_GET["username"];
$password = $_GET["password"];
echo "{$user}".":"."{$password}";
?>
登录后复制

相关推荐:

实例分析ajax和php实现无刷新验证手机号

Ajax和PHP正则表达式验证表单及验证码

通过AJAX和PHP,提交JQuery Mobile表单(两篇)

以上是Ajax和PHP实例分析的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板