Home >Backend Development >PHP Tutorial >Example tutorial on using ajax in ThinkPHP, thinkphpajax_PHP tutorial
Example tutorial on using ajax in ThinkPHP, thinkphpajax_PHP tutorial
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-07-13 10:20:051083browse
Ajax usage example tutorial in ThinkPHP, thinkphpajax
The example in this article describes the method of using ajax in ThinkPHP. The submission form is as shown below:
Click submit, there is no need to refresh this page, the content will be submitted to the database, and the submitted content will be displayed on this page. As shown below:
1. jquery implementation method:
MessageAction.class.php page code is as follows:
<?php
class MessageAction extends Action{
function index(){
$this->display();
}
function add(){
//ajaxReturn(数据,'提示信息',状态)
$m=M('message');
if($m->add($_GET)){
$this->ajaxReturn($_GET,'添加信息成功',1);
}else{
$this->ajaxReturn(0,'添加信息失败',0);
}
}
}
?>
The template index.html code is as follows:
<html>
<head>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('input:button').click(function(){
var $title=$('input[name="title"]').val();
var $message=$('input[name="message"]').val();
$mess=$('#mess');
$.getJSON('__URL__/add',{title:$title,message:$message},function(json){
//alert(json);return false;
if(json.status==1){
$mess.slideDown(3000,function(){
$mess.css('display','block');
}).html('标题为'+json.data.title+'信息为'+json.data.message);
}else{
$mess.slideDown(3000,function(){
$mess.css('display','block');
}).html('信息添加失败，请检查');
}
});
})
})
</script>
</head>
<body>
<div style="display:none; color:red;" id="mess"></div>
<form action="" method="get">
标题：<input type="text" name="title" /><br />
信息：<input type="text" name="message" /><br />
<input type="button" value="提交" />
</form>
</body>
</html>
2. ThinkPHP implementation method:
MessageAction.class.php page code is as follows:
<?php
class MessageAction extends Action{
function index(){
$this->display();
}
function addtwo(){
$m=M('message');
if($vo=$m->create()){
if($m->add()){
$this->ajaxReturn($vo,'添加成功',1);
}else{
$this->ajaxReturn(0,'添加失败',0);
}
}else{
$this->error($m->getError());
}
}
}
?>
The template index.html code is as follows:
<html>
<head>
<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/ThinkAjax.js"></script>
<script type="text/javascript">
function add(){
//ThinkAjax.sendForm(表单ID,URL,回调函数,信息显示的地方);
ThinkAjax.sendForm('frm','__URL__/addtwo',wc);
}
function wc(data,status){
if(status!=1){
alert('发送失败');
}else{
$('list').innerHTML+='标题'+data.title+',信息'+data.message;
}
}
</script>
</head>
<body>
<div id="list"></div>
<form action="" 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>
Interested friends can test and run the example shown in this article to deepen their understanding of Ajax applications.
thinkphp has its own ajax method, which is very simple to use and convenient for interaction. Give an example and you will understand.
First include the required js (available for download from his official website), and modify the path yourself.
c131a0945483fdf19a541e765bcc981a2cacc6d41bbb37262a98f745aa00fbf0
202069bb66e968e5c9a0489d8d820f992cacc6d41bbb37262a98f745aa00fbf0
02aefe3cd887e7d8b0305edd84f340842cacc6d41bbb37262a98f745aa00fbf0
9b7a28675821bce27b1c89ace5b1a9b92cacc6d41bbb37262a98f745aa00fbf0
Then, for example, here is an ordinary non-refresh verification of user name repetition:
//First place an information prompt:
5ae5039725ccfc9d61312e8919ccbf3116b28748ea4df4d9c2150843fecfba68
//Then there is the input box, click to determine whether the user name already exists
c61fda606f9afcb1d5e451c7b886a45be811535b8627d338bb83cff7ce9efa98ebef0953ef9230cb41d4902df6dd768254bdf357c58b8a65c66d7c19c8e4d114
//Then the JS
function checkUser(){
ThinkAjax.send('/User/chkUser','ajax=1&username ='+$('username').value,'','result');
}
//The first parameter is the program page for submission processing, the second is the passed parameter value, the Three are the functions returned after successful return (empty here), and the fourth is the location where the value is returned (that is, the id="result" set before)
Finally, there is only one program processing page left. User/chkUser
class UserAction exte...The rest of the text>>
The parameters in your callback function are written incorrectly
Write like this
alert(dd.data);
You don’t understand the data format returned by ajaxReturn
You can access is_user directly through the browser You can see