<!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>jquery与ajax的应用</title>
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<script type="text/javascript" src="scripts/jquery-1.7.2.js" ></script>
<script type="text/javascript">
$(function() {
$("#send").click(function() { $.post("get3.php",{ //向get3.php页面发送post请求
username:$("#username").val(),//发送数据
content:$("#content").val()
},function(data,textStatus) { //回调函数
var username = data.username;
var content = data.content;
var htmltext = "<div class='comment'><h6>"+username+"</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(htmltext);//将返回的json数据以html的形式插入到页面中
},"json");
});
});
</script>
</head>
<body>
<!---------------------- post()方法--------------------->
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText" ></div>
</body>
</html> header("Content-Type: text/html;charset=utf-8");
echo "{ username : \"{$_REQUEST['username']}\" , content : \"{$_REQUEST['content']}\"}"
$(function() {
$("#send").click(function() {
$.post("get3.php",{ //向get3.php页面发送post请求
username:$("#username").val(),//发送数据
content:$("#content").val()
},function(result) { //回调函数
$("#resText").html(result);//将返回的json数据以html的形式插入到页面中
},"html");
});
}); <?php
header("Content-Type: text/html;charset=utf-8");
echo "<div class='comment'><h6>".$_REQUEST['username']."</h6><p class='para'>".$_REQUEST['content']."</p></div>";