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 相关文章推荐
输出控制类
Oct 09 PHP
使用php shell命令合并图片的代码
Jun 23 PHP
PHP采用get获取url汉字出现乱码的解决方法
Nov 13 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
Dec 17 PHP
php进行支付宝开发中return_url和notify_url的区别分析
Dec 22 PHP
PHP5多态性与动态绑定介绍
Apr 03 PHP
yii2 页面底部加载css和js的技巧
Apr 21 PHP
PHP入门教程之图像处理技巧分析
Sep 11 PHP
Yii实现复选框批量操作实例代码
Mar 15 PHP
PHP jQuery+Ajax结合写批量删除功能
May 19 PHP
gearman中任务的优先级和返回状态实例分析
Feb 27 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
Feb 28 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 分页类 扩展代码
2009/06/11 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python的Tqdm模块的使用
2018/01/10 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
python实现计算器简易版
2020/12/17 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
机械个人求职信范文
2014/01/24 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
承诺书范本
2015/01/21 职场文书
考试作弊检讨书
2015/01/27 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
工程服务质量承诺书
2015/04/29 职场文书
管理失职检讨书范文
2015/05/05 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技