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 相关文章推荐
初探PHP5
Oct 09 PHP
PHP源码之 ext/mysql扩展部分
Jul 17 PHP
Discuz 6.0+ 批量注册用户名
Sep 13 PHP
PHP执行zip与rar解压缩方法实现代码
Dec 05 PHP
使用cookie实现统计访问者登陆次数
Jun 08 PHP
php根据分类合并数组的方法实例详解
Nov 06 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
Jan 22 PHP
PHP单例模式简单用法示例
Jun 23 PHP
PHP类的自动加载机制实现方法分析
Jan 10 PHP
基于Laravel 多个中间件的执行顺序详解
Oct 21 PHP
laravel 解决Validator使用中出现的问题
Oct 25 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
Nov 25 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
DOMXML函数笔记
2006/10/09 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python实现二叉搜索树
2016/02/03 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python字典的遍历3种方法详解
2019/08/10 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
技能比赛获奖感言
2014/02/14 职场文书
推荐信格式范文
2014/05/09 职场文书
大专生找工作自荐书
2014/06/10 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python