AJax技术

ThinkPHP JQuery Ajax 的实现实例

字号+ 作者:H5之家 来源:H5之家 2015-10-08 15:33 我要评论( )

ThinkPHP 框架和客户端是完全分离的,而服务端返回 ajaxReturn 方法也是通用的,本文就以 JQuery 来实现《ThinkPHP Ajax 使用详解及实例》一文中同样的功能 ...

5iDev    ThinkPHP教程     ThinkPHP JQuery Ajax 的实现实例

ThinkPHP JQuery Ajax 的实现实例ThinkPHP JQuery Ajax

ThinkPHP 框架和客户端是完全分离的,没有任何的依赖,而服务端返回 ajaxReturn 方法也是通用的。在《ThinkPHP Ajax 使用详解及实例》一文中,讲述的是 ThinkAjax 类库结合 prototyep 和 mootools 来实现的 Ajax 。事实上可以使用任何 Js 类库来实现 ThinkPHP Ajax ,本文就以 JQuery 来实现《ThinkPHP Ajax 使用详解及实例》一文中同样的功能。

Js 类库

要使用 ThinkPHP JQuery Ajax,需要加载的 Js 类库有:

<load href="/Public/Js/Jquery/jquery.js" /> <load href="/Public/Js/Jquery/jquery.form.js" />

说明:jquery.form.js 类库是一个 JQuery 的插件,在这里用于简化表单的 ajax 交互,可根据实际情况决定是否加载。

这些 Js 类库可以在ThinkPHP 2.1 版本官方示例的 Public/Js/Jquery 下获得,在本节实例代码下载包也提供,请确认在进行 Ajax 测试之前,正确加载了以上 Js 类库。

AJAX 返回

使用 ajaxReturn 与 success/error 这两种方法返回。

关于 ajaxReturn 方法返回具体细节请参阅《ThinkPHP Ajax 使用详解及实例》一文,success/error 返回请参阅《ThinkPHP success/error 方法返回 Ajax 信息》一文。

ThinkPHP JQuery Ajax 实例

例子功能与《ThinkPHP Ajax 使用详解及实例》一样,点击(实际使用中也可以使用其他事件来替代) “检测用户名” 按钮检测用户名是否符合要求,点击 “提交” 按钮根据输入的用户名返回不同的信息。

html 文件

Public/loginJauery.html 模板,Js 处理函数及 form 表单:

<script language="JavaScript"> <!-- function checkName(){ $.post('-Article/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> <div id="result"></div> <div id="list"></div> <form name="login" id="form1" method="post" action="-Article/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> 说明 服务端操作

输出 loginJquery.html 模板:

public function loginJquery(){ $this->display(); }

checkName 及 checkLogin 操作与《ThinkPHP Ajax 使用详解及实例》一文完全一致,为便于查看下面再行列出:

public function checkName(){ if ($_POST['username'] == 'admin'){ $this->success('用户名正确~'); }else{ $this->error('用户名错误!'); } } public function checkLogin(){ if ($_POST['username'] == 'admin'){ $this->ajaxReturn($_POST['username'],'用户名正确~',1); }else{ $this->ajaxReturn('','用户名错误!',0); } }

当表单中输入的用户名是 admin 的时候,返回正确信息,否则返回用户名错误的提示。更进一步的,可以将上述 checkLogin 方法进行扩展成为用户登陆检测功能模块。

以上是 ThinkPHP JQuery Ajax 的实现过程及关键代码部分,如果您对 ThinkPHP Ajax 还不是很熟悉,还请同时参考本节前面两篇文章《ThinkPHP Ajax 使用详解及实例》与《ThinkPHP success/error 方法返回 Ajax 信息》。

要查看该实例完整代码,请参阅《ThinkPHP Ajax 实例代码》,或者点击此处下载完整代码。

本章节内容共分 4 部分:

  • 1. ThinkPHP Ajax 使用详解及实例
  • 2. ThinkPHP success/error 方法返回 Ajax 信息
  • 3. ThinkPHP JQuery Ajax 的实现实例
  • 4. ThinkPHP Ajax 实例源代码
  • 上一节
  • 下一节
  • 查看评论

    #1楼 [2011-08-12 09:15]  JaredLee

    很好的教程、感谢站长

    #2楼 [2011-09-29 17:19]  strong

    看了一下午,教程很好,很详细,3Q

    #3楼 [2011-10-31 10:36]  new

    讲的比较清楚,谢谢了!

    #4楼 [2012-02-29 16:49]  new

    好好学习吧,买房子的人

    #5楼 [2012-04-23 17:02]  intel

    很感谢站长

    #6楼 [2012-04-23 17:03]  AMD

    very good!

    #7楼 [2012-04-23 17:02]  intel

    很好的教程

    #8楼 [2012-04-01 19:10]  以服之名

    收藏了你的网站 很好很重要的教程

    #9楼 [2012-05-31 17:21]  礼品分享

    非常不错!收藏!

    #10楼 [2012-09-17 15:33]  小张的回忆

    非常不错!收藏!

    #11楼 [2012-09-29 22:15]  yy

    hh

    #12楼 [2014-05-06 10:16]  快乐小编

    楼主写的不错。这个文章也不错。ajax请求原理及jquery $.ajax封装全解析 。 
     suchso.com/projecteactual/web-browser-ajax-callback-jquery.html

    #13楼 [2015-05-05 18:32]  Ricky

    我用此方法,ajaxForm 提交之前的能正常,但是感觉不能提交到服务端?求指导啊

    发表评论

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • JQuery实现Ajax加载图片的方法

      JQuery实现Ajax加载图片的方法

      2016-02-24 17:01

    • 判断用户是不是为ajax请求

      判断用户是不是为ajax请求

      2016-02-24 17:00

    • Ajax与WEB开发 by alixixi.com

      Ajax与WEB开发 by alixixi.com

      2016-02-11 11:02

    • jQuery.ajax()的相关参数及使用

      jQuery.ajax()的相关参数及使用

      2016-02-08 16:00

    网友点评