热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ThinkPHPJQueryAjax的实现实例

ThinkPHP框架和客户端是完全分离的,没有任何的依赖,而服务端返回ajaxReturn方法也是通用的。在《ThinkPHPAjax使用详解及实例》一文中
ThinkPHP JQuery Ajax

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

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


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
表单:








  1. 用户名:


  2. 密 码:





说明

点击“检查用户名”按钮触发 checkName() 函数,该函数是
JQuery 一个简单的 POST 请求功能以取代复杂 $.ajax。
$('#form1').ajaxForm 用于替代原本的按钮 click 事件 +
$.ajax() 实现,这是 jquery.form.js 插件对 form 提交的简化。
与《ThinkPHP Ajax
使用详解及实例》相比,本文增加了 checkForm() 判断。
返回的数据 data 中,data.data 表示返回的数据,data.info
表示提示信息,data.status 表示状态,分别与 ajaxReturn 前三个参数对应。
由于加载了 jquery.form.js
插件,表单须按一般格式提供 action 值及提交按钮 type="submit" 。
要利用 JQuery 操作更多 html(如追加 html 元素为
append()),请参考 JQuery 手册。

服务端操作

输出 loginJquery.html
模板:

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

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




  1. public function checkName(){
  2. if ($_POST['username'] == 'admin'){
  3. $this->success('用户名正确~');
  4. }else{
  5. $this->error('用户名错误!');
  6. }
  7. }
  8. public function checkLogin(){
  9. if ($_POST['username'] == 'admin'){
  10. $this->ajaxReturn($_POST['username'],'用户名正确~',1);
  11. }else{
  12. $this->ajaxReturn('','用户名错误!',0);
  13. }
  14. }

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

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

要查看该实例完整代码,请参阅《ThinkPHP Ajax 实例代码》,或者点击此处下载完整代码
推荐阅读
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 如何实现织梦DedeCms全站伪静态
    本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ... [详细]
  • GetWindowLong函数
    今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • jQuery如何判断一个元素是否被点击?
    本文介绍了使用jQuery判断一个元素是否被点击的方法,并通过示例进行了具体说明。注意要指定父级,否则会执行多次。 ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • Jquery 跨域问题
    为什么80%的码农都做不了架构师?JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念。当然 ... [详细]
  • 本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ... [详细]
author-avatar
小小可爱天使
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有