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 相关文章推荐
在数据量大(超过10万)的情况下
Jan 15 PHP
php debug 安装技巧
Apr 30 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
Jun 02 PHP
说说PHP的autoLoad自动加载机制
Sep 27 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
Jun 28 PHP
php上传中文文件名乱码问题处理方案
Feb 03 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
Aug 18 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
Sep 11 PHP
Laravel手动分页实现方法详解
Oct 09 PHP
PHP实现的AES加密、解密封装类与用法示例
Aug 02 PHP
laravel获取不到session的三种解决办法【推荐】
Sep 16 PHP
PHP实现单例模式建立数据库连接的方法分析
Feb 11 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 mysql事务问题实例分析
2016/01/18 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Python编写万花尺图案实例
2021/01/03 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
车间班组长岗位职责
2013/11/13 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
卫生巾广告词
2014/03/18 职场文书
借款协议书
2014/09/16 职场文书
新闻稿件写作范文
2015/07/18 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python