TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结


Posted in PHP onFebruary 10, 2020

本文实例讲述了TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法。分享给大家供大家参考,具体如下:

方法一: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串,这个是jquery提供的方法

前端代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ajax交互</title>
 <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <script>
  $('.but').click(function () {
    var formData = $("#myform").serialize();//formData值:account=sdf&passwd=sdf
    //serialize() 方法通过序列化表单值,创建 URL 编码文本字符串,这个是jquery提供的方法
    $.ajax({
      type: "post",
      url: "{:url('index/index/reg')}", //数据传输的控制器方法
      data: formData,//这里data传递过去的是序列化以后的字符串
      success: function (data) {
        console.log(data);
        $("#content").append(data);//获取成功以后输出返回值
      }
    });
    return false;
  })
</script>
 </head>
 <body>
 <form id="myform">
  <!--这里给表单起个id用于获取表单并序列化-->
  <input type="text" name="account" />
  <input type="password" name="passwd" />
  <input type="button" value="提交" class="but">
 </form>
 <div id="content">
 </div>
 </body>
</html>

后端代码

public function reg($account,$passwd){
 if($account == '123'){
  return json("ajax成功!".$account."---".$passwd);
 }else{
  return json("你输出的是其他值:".$account."---".$passwd);
 }
}

方法二: 利用layui的form.on事件监听

前端代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>管理员登录</title>
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
     content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="shortcut icon" href="./favicon.ico" rel="external nofollow" type="image/x-icon"/>
  <link rel="stylesheet" href="./static/css/font.css" rel="external nofollow" >
  <link rel="stylesheet" href="./static/css/weadmin.css" rel="external nofollow" >
  <script src="./lib/layui/layui.js" charset="utf-8"></script>
</head>
<body class="login-bg">
<div class="login">
  <div class="message">管理登录</div>
  <div id="darkbannerwrap"></div>
  <form method="post" class="layui-form">
    <input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input">
    <hr class="hr15">
    <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
    <hr class="hr15">
    <input class="loginin" value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
    <hr class="hr20">
  </form>
</div>
<script src="./static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  layui.extend({
    admin: '{/}./static/js/admin'
  });
  //layui.use调用模块
  layui.use(['form', 'admin'], function () {
    //获得form模块
    var form = layui.form
      , admin = layui.admin;
    //监听提交
    //事件监听
    //语法:form.on('event(过滤器值)', callback);(过滤器值指lay-filter="过滤器值")
    //function(data)里的data是一个object,data.field是表单填写的内容
    form.on('submit(login)', function (data) {
      //$.post写法:$(selector).post(URL,data,function(data,status,xhr),dataType)
      var post_data = data.field;
      $.post("{:url('verify')}"
        , post_data
        , function (data) {
          console.log(data);
        }
      )
      return false;
    });
  })
  ;
</script>
<!-- 底部结束 -->
</body>

后端代码

public function verify()
  {
    $posts = input("post.password");
    return json($posts);
  }

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

PHP 相关文章推荐
php strlen mb_strlen计算中英文混排字符串长度
Jul 10 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
Jul 20 PHP
php 保留字列表
Oct 04 PHP
基于php socket(fsockopen)的应用实例分析
Jun 02 PHP
php中用加号与用array_merge合并数组的区别深入分析
Jun 03 PHP
php实现文件下载功能的几个代码分享
May 10 PHP
PHP处理大量表单字段的便捷方法
Feb 07 PHP
深入浅析用PHP实现MVC
Mar 02 PHP
总结PHP删除字符串最后一个字符的三种方法
Aug 30 PHP
Yii2实现增删改查后留在当前页的方法详解
Jan 13 PHP
Yii 2中的load()和save()示例详解
Aug 03 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
Sep 20 PHP
tp5框架基于ajax实现异步删除图片的方法示例
Feb 10 #PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
Feb 10 #PHP
tp5框架使用cookie加密算法实现登录功能示例
Feb 10 #PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
Feb 10 #PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
Feb 07 #PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
Feb 07 #PHP
PHP查找一列有序数组是否包含某值的方法
Feb 07 #PHP
You might like
PHP写的求多项式导数的函数代码
2012/07/04 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
详解如何使用Python编写vim插件
2017/11/28 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python多进程并发demo实例解析
2019/12/13 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python