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

2024-05-04 22:53:16

字体：大中小

来源：转载

供稿：网友

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

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

前端代码

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>ajax交互</title> <script src="https://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>

上一篇：ThinkPHP5.1+Ajax实现的无刷新分页功能示例

下一篇：tp5框架基于Ajax实现列表无刷新排序功能示例