TP5(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程序设计有所帮助。