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

 更新时间:2020年02月10日 10:03:53   作者:Karagrade   我要评论
这篇文章主要介绍了TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法,结合实例形式总结分析了thinkPHP5使用ajax与后台数据交互的两种实现方法及相关操作技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

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

相关文章

  • 实例分析10个PHP常见安全问题

    实例分析10个PHP常见安全问题

    在本篇文章里小编给各位分享了关于10个PHP常见安全问题以及相关实例代码,需要的朋友们学习参考下。
    2019-07-07
  • 关于PHP内置的字符串处理函数详解

    关于PHP内置的字符串处理函数详解

    下面小编就为大家带来一篇关于PHP内置的字符串处理函数详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • PHP + plupload.js实现多图上传并显示进度条加删除实例代码

    PHP + plupload.js实现多图上传并显示进度条加删除实例代码

    本篇文章主要介绍了PHP + plupload.js实现多图上传并显示进度条加删除实例代码。具有一定的参考价值,有兴趣的可以了解一下。
    2017-03-03
  • PHP 并发场景的几种解决方案

    PHP 并发场景的几种解决方案

    这篇文章主要介绍了PHP 并发场景的几种解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • PHP使用glob方法遍历文件夹下所有文件的实例

    PHP使用glob方法遍历文件夹下所有文件的实例

    今天小编就为大家分享一篇PHP使用glob方法遍历文件夹下所有文件的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • php 无限级数据JSON格式及JS解析

    php 无限级数据JSON格式及JS解析

    公司要做个Flash效果的页面,需要个无限级树,显示用户邀请的好友及其下线,由此就构成了无限级的关系,可能下线有无限多。
    2010-07-07
  • php+redis实现商城秒杀功能

    php+redis实现商城秒杀功能

    这篇文章主要为大家详细介绍了php+redis实现商城秒杀功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • Yii框架form表单用法实例

    Yii框架form表单用法实例

    这篇文章主要介绍了Yii框架form表单用法,实例分析了Yii中form表单的实现方法与相关技巧,非常具有实用价值,需要的朋友可以参考下
    2014-12-12
  • PHP文件缓存smarty模板应用实例分析

    PHP文件缓存smarty模板应用实例分析

    这篇文章主要介绍了PHP文件缓存smarty模板应用方法,结合实例形式较为详细的分析了smarty模板缓存的相关使用技巧,需要的朋友可以参考下
    2016-02-02
  • 微信开发之网页授权获取用户信息(二)

    微信开发之网页授权获取用户信息(二)

    本文给大家阐述的微信开发基于yii2.0框架,对微信开发之网页授权获取用户信息相关知识感兴趣的朋友通过本文学习吧
    2016-01-01

最新评论