当前位置：首页 > CMS教程 > Thinkphp > 列表

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

发布:smiling　来源: PHP粉丝网 　添加日期：2022-02-11 12:43:44　浏览: 评论：0　

这篇文章主要介绍了TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法,结合实例形式总结分析了thinkPHP5使用ajax与后台数据交互的两种实现方法及相关操作技巧,需要的朋友可以参考下。

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

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

前端代码

  1. <!DOCTYPE html> 
  2. <html> 
  3.  <head> 
  4.  <meta charset="UTF-8"> 
  5.  <title>ajax交互</title> 
  6.  <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> 
  7.  <script> 
  8.   $('.but').click(function () { 
  9.     var formData = $("#myform").serialize();//formData值：account=sdf&passwd=sdf 
  10.     //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法 
  11.     $.ajax({ 
  12.       type: "post", 
  13.       url: "{:url('index/index/reg')}", //数据传输的控制器方法 
  14.       data: formData,//这里data传递过去的是序列化以后的字符串 
  15.       success: function (data) { 
  16.         console.log(data); 
  17.         $("#content").append(data);//获取成功以后输出返回值 
  18.       } 
  19.     }); 
  20.     return false; 
  21.   }) 
  22. </script> 
  23.  </head> 
  24.  <body> 
  25.  <form id="myform"> 
  26.   <!--这里给表单起个id用于获取表单并序列化--> 
  27.   <input type="text" name="account" /> 
  28.   <input type="password" name="passwd" /> 
  29.   <input type="button" value="提交" class="but"> 
  30.  </form> 
  31.  <div id="content"> 
  32.  </div> 
  33.  </body> 
  34. </html> 

后端代码

  1. public function reg($account,$passwd){ 
  2.  if($account == '123'){ 
  3.   return json("ajax成功！".$account."---".$passwd); 
  4.  }else{ 
  5.   return json("你输出的是其他值：".$account."---".$passwd); 
  6.  } 
  7. } 

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

前端代码

  1. <!doctype html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>管理员登录</title> 
  6.   <meta name="renderer" content="webkit|ie-comp|ie-stand"> 
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  8.   <meta name="viewport" 
  9.      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
  10.   <meta http-equiv="Cache-Control" content="no-siteapp"/> 
  11.   <link rel="shortcut icon" href="./favicon.ico" rel="external nofollow" type="image/x-icon"/> 
  12.   <link rel="stylesheet" href="./static/css/font.css" rel="external nofollow" > 
  13.   <link rel="stylesheet" href="./static/css/weadmin.css" rel="external nofollow" > 
  14.   <script src="./lib/layui/layui.js" charset="utf-8"></script> 
  15. </head> 
  16. <body class="login-bg"> 
  17. <div class="login"> 
  18.   <div class="message">管理登录</div> 
  19.   <div id="darkbannerwrap"></div> 
  20.   <form method="post" class="layui-form"> 
  21.     <input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input"> 
  22.     <hr class="hr15"> 
  23.     <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input"> 
  24.     <hr class="hr15"> 
  25.     <input class="loginin" value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit"> 
  26.     <hr class="hr20"> 
  27.   </form> 
  28. </div> 
  29. <script src="./static/js/jquery-3.3.1.min.js"></script> 
  30. <script type="text/javascript"> 
  31.   layui.extend({ 
  32.     admin: '{/}./static/js/admin' 
  33.   }); 
  34.   //layui.use调用模块 
  35.   layui.use(['form', 'admin'], function () { 
  36.     //获得form模块 
  37.     var form = layui.form 
  38.       , admin = layui.admin; 
  39.     //监听提交 
  40.     //事件监听 
  41.     //语法：form.on('event(过滤器值)', callback);（过滤器值指lay-filter="过滤器值"） 
  42.     //function(data)里的data是一个object，data.field是表单填写的内容 
  43.     form.on('submit(login)', function (data) { 
  44.       //$.post写法：$(selector).post(URL,data,function(data,status,xhr),dataType) 
  45.       var post_data = data.field; 
  46.       $.post("{:url('verify')}" 
  47.         , post_data 
  48.         , function (data) { 
  49.           console.log(data); 
  50.         } 
  51.       ) 
  52.       return false; 
  53.     }); 
  54.   }) 
  55.   ; 
  56. </script> 
  57. <!-- 底部结束 --> 
  58. </body> 

后端代码

  1. public function verify() 
  2.  { 
  3.    $posts = input("post.password"); 
  4.    return json($posts); 
  5.  }

Tags: TP5数据交互 ajax数据交互

分享到：

推荐文章

热门文章

最新评论文章