ThinkPHP学習ノート(十五)AjaxとJqueryを用いてページのリフレッシュなしを実現
4237 ワード
Action
jquery.html
index.html
<?php
class MessageAction extends Action{
public function index(){
$this->display();
}
public function jquery(){
$this->display();
}
public function add(){
$m=M('Message');
if ($vo=$m->create()){
if ($m->add()) {
// $this->success(' ');
// ajax
$this->ajaxReturn($vo,' ',1);
}else{
// $this->error(' ');
// ajax
$this->ajaxReturn(0,' ',0);
}
}else{
$this->error($m->getError());
}
}
public function addjquery(){
//ajaxReturn()
// json
// ： ； ： ； ：
//echo $this->ajaxReturn(3,' ',2);
$m=M('Message');
if ($m->add($_GET)){
$this->ajaxReturn($_GET,' ',1);
}else{
$this->ajaxReturn(0,' ',0);
}
}
}
?>jquery.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">
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.4.4.js"></script>
<script type="text/javascript">
// ie ，firefox
$(function(){
$('input:button').click(function(){
var $title=$('input[name="title"]').val();
var $message=$('input[name="message"]').val();
$msg=$('#msg');
$.getJSON('__URL__/addjquery',{title:$title,message:$message},function(json){
if(json.status==1){
$msg.slideDown(2000,function(){
$msg.css('display','block');
}).html(' '+json.data.title+' '+json.data.message);
}else{
$msg.slideDown(2000,function(){
$msg.css('display','block');
}).html(' ， ');
}
});
})
})
</script>
<title></title>
</head>
<body>
<!-- 1.jquery ， jquery Public/js/ -->
<div style="display:none;color:red;" id="msg"></div>
<form action="__URL__/addjquery" method="get">
：<input type="text" name="title"/><br/>
：<input type="text" name="message"/><br/>
<input type="button" value=" "/><!-- button -->
</form>
</body>
</html>index.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">
<script type="text/javascript" src="__PUBLIC__/js/Base.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/prototype.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/mootools.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/ajax/ThinkAjax.js"></script>
<script type="text/javascript">
function add(){
ThinkAjax.sendForm('frm','__URL__/add',callback,'result');
}
function callback(data,status){
alert(status);
if(status==1){
$('msg').innerHTML+=' '+data.title+', '+data.message;
}else{
alert(' ');
}
}
</script>
<title></title>
</head>
<body>
<!-- 1.ajax ， js Public/js/ -->
<div style="color:red;" id="msg"></div>
<!-- id， onclick -->
<form action="__URL__/add" method="post" id="frm">
：<input type="text" name="title"/><br/>
：<input type="text" name="message"/><br/>
<input type="button" value=" " onclick="add()"/>
</form>
</body>
</html>