首先是html页面,引入了Jquery
</pre><pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<form action="" id="test" method="post">
用戶名
<input id="username" name="username" type="text"/>
<br>
密码
<input id="pwd" name="pwd" type="text"/>
<br>
<input id="subminButton" name="pwd" type="button" value="提交"/>
</form>
<p>姓名:<span id="name1"></span></p>
<p>密码:<span id="pwd1"></span></p>
<script type="text/javascript" >
$("#subminButton").click(function (){
var username=$("#username").val();
var password=$("#pwd").val();
var data="username="+username+"&pwd="+password;
var url="test.php";
$.post(url,data,function(json){
ajaxobj=eval("("+json+")");
$("#name1").html(ajaxobj.name);
$("#pwd1").html(ajaxobj.password);
//alert(ajaxobj.name);
});
});
</script>
</body>
</html>
接着是PHP页面,命名为test.php,将接收到的数据又以Json的形式返回
<?php
$name= $_POST['username'];
$password=$_POST['pwd'];
$list=array("name"=>$name,"password"=>$password);
echo json_encode($list);
?>