PHP Ajax Json 源码示例



源码演示如上:



源码:

index.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
 //创建ajax引擎
function getXmlHttpObject(){
	var xmlHttpRequest;
	// 不同的浏览器获取对象xmlHttprequest 对象方法不一样
	if(window.ActiveXObject){
		xmlHttpRequest = new ActiveXObject("Micosoft.XMLHTTP");
	}else{
		xmlHttpRequest = new XMLHttpRequest();
	}
	return xmlHttpRequest;
}

var myXmlHttpRequest ="";

// 执行表格添加
function myTable(){
	myXmlHttpRequest = getXmlHttpObject();
	// 怎么判断是否创建成功
	if(myXmlHttpRequest){
		// POST
		var url="/test/post.php";
		var data="username="+$("username").value+"&age="+$("age").value+"&job="+$("job").value;

		// 打开请求
		myXmlHttpRequest.open("post",url,true);

		// POST 还有一句话,这句话必须
		myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
		
		// 指定回调函数 handle是函数名
		myXmlHttpRequest.onreadystatechange=handle;

		// 发送请求 如果是get请求则填入 null 即可
		// myXmlHttpRequest.send(null);

		// 如果是post 请求,则填入实际的数据
		// POST
		myXmlHttpRequest.send(data);

	}
}

// 回调函数
function handle(){
	// 判断是否执行成功
	if(myXmlHttpRequest.readyState==4){
		if(myXmlHttpRequest.status==200){	
			
		// 取回成功后的数据
		var json=myXmlHttpRequest.responseText;
		
		var tbody=document.createElement("tbody");
		tbody.innerHTML=json;
		$("my_table").appendChild(tbody);

		
		}
	}
}

function $(id){
		return document.getElementById(id);
}

</script>
</head>
<body>
<div id="result">Ajax增加表格信息
	<form id="my" action="" method="post">      
		<p><span>姓名:</span> <input type="text" name="username" id="username"/></p>     
		<p><span>年龄:</span><input type="text" name="age" id="age" /></p>
		<p><span>工作:</span><input type="text" name="job" id="job"/></p>
	</form>

	
<button id="send" onclick="myTable()">提交</button>
<br/><br/><br/>
<table class="table" id="my_table"  border="1px solid">

		<tr>
			<th>姓名:</th>
			<th>年龄:</th>
			<th>工作:</th>
		</tr>
		<tr>
			<th>小明</th>
			<th>18</th>
			<th>IT</th>
		</tr>
	</table>
</body>
</html>


处理程序 post.php


<?php
header("Content-type:text/html;charset=utf-8");    
$username = $_POST['username'];    
$age = $_POST['age'];    
$job = $_POST['job'];    

echo "<tr>";
	echo "<th>".$username."</th>";
	echo "<th>".$age."</th>";
	echo "<th>".$job."</th>";
	echo "</tr>";
?> 

赞赏
X
赞赏方式:
  • 支付宝
  • 微信

打开支付宝扫一扫

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.vxia.net/post-1617.html

相关推荐