ThinkPHP Ajax 实例源代码
ThinkPHP Ajax 实例源代码
Public/login.html 模板
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ThinkPHP Ajax 实现示例</title>
<load href="__PUBLIC__/Js/Base.js" />
<load href="__PUBLIC__/Js/prototype.js" />
<load href="__PUBLIC__/Js/mootools.js" />
<load href="__PUBLIC__/Js/Ajax/ThinkAjax.js" />
<script language="JavaScript">
<!--
function checkName(){
ThinkAjax.send('__URL__/checkName','ajax=1&username='+$('username').value,'','result');
}
function loginCheck(){
ThinkAjax.sendForm('form1','__URL__/checkLogin',complete,'result');
}
function complete(data,status){
if (status==1)
{
// 提示信息
$('list').innerHTML = '<span style="color:blue">'+data+'你好!</span>';
}
}
//-->
</script>
</head>
<body>
<div>
<div id="result"></div>
<div id="list"></div>
<form name="login" id="form1" method="post">
用户名: <input type="text" name="username" />
<input type="button" value="检查用户名" onClick="checkName()"><br />
密 码: <input type="password" name="password" /><br />
<input type="button" onClick="loginCheck()" value="提 交" />
</form>
</div>
</body>
</html>Public/loginJquery.html 模板
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ThinkPHP JQuery Ajax 实现示例</title>
<load href="__PUBLIC__/Js/Jquery/jquery.js" />
<load href="__PUBLIC__/Js/Jquery/jquery.form.js" />
<script language="JavaScript">
<!--
function checkName(){
$.post('__URL__/checkName',{'username':$('#username').val()},function(data){
$('#result').html(data.info).show();
$("#result").fadeOut(4000);
},'json');
}
$(function(){
$('#form1').ajaxForm({
beforeSubmit: checkForm, // 表单提交执行前检测
success: complete, // 表单提交后执行函数
dataType: 'json'
});
function checkForm(){
if( '' == $.trim($('#username').val())){
$('#result').html('用户名不能为空！').show();
$("#result").fadeOut(4000);
$('#username').focus();
return false;
}
// 可以在此添加其它判断
}
function complete(data){
if(data.status==1){
$('#result').html(data.info).show();
// 更新列表
username = data.data;
$('#list').html('<span style="color:blue">'+username+'你好!</span>');
}else{
$('#result').html(data.info).show();
// 隐藏上次遗留的信息
$('#list').hide();
}
}
});
//-->
</script>
</head>
<body>
<div>
<div id="result"></div>
<div id="list"></div>
<form name="login" id="form1" method="post" action="__URL__/checkLogin">
用户名: <input type="text" name="username" id="username" />
<input type="button" value="检查用户名" onClick="checkName()"><br />
密 码: <input type="password" name="password" /><br />
<input type="hidden" name="ajax" value="1">
<input type="submit" value="提 交">
</form>
</div>
</body>
</html>Public 模块相关操作
<?php
class PublicAction extends Action{
public function login(){
$this->display();
}
public function checkName(){
if ($_POST['username'] == 'admin'){
$this->success('用户名正确~');
}else{
$this->error('用户名错误！');
}
}
public function checkLogin(){
if($_POST['username'] == 'admin'){
$this->ajaxReturn($_POST['username'],'用户名正确~',1);
// success 方法返回
//$this->success('用户名正确~',true);
// 加载了 Js/Form/CheckForm.js 类库或提交了 ajax=1 隐藏表单元素
//$this->success('用户名正确~');
}else{
$this->ajaxReturn('','用户名错误！',0);
// error 方法返回
//$this->error('用户名错误！',true);
// 加载了 Js/Form/CheckForm.js 类库或提交了 ajax=1 隐藏表单元素
//$this->error('用户名错误！');
}
}
}
?> 本文属原创，转载请注明原文：http://www.zhimatong.com/jiaocheng/604.html
为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。
内容有用
热门主题
相关阅读
- ThinkPHP 5.1 缓存的创建与读取
- ThinkPHP5 查询本年、本月、本周的方法
- ThinkPHP使用update函数更新数据的方法
- ThinkPHP6多应用下路由设置
- ThinkPHP5.1图片上传后自定义图片名称和图片存储路径
- ThinkPHP页面提示Warning: require(): open_basedir restriction in effect. File的解决方法
- 中国数据API返回字符串true，判断不起作用的解决方法
- tp5中mysql查询select结果去重显示唯一数据的方法
- ThinkpPHP5.1表单多选checkbox的判断和保存传值
- thinkphp前端页面输出html
- vuejs和thinkphp结合的2种方法
- tp5.1 随机查询数据
在线
购物车
