欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例

程序员文章站 2022-06-03 17:20:50
本文实例讲述了tp5(thinkphp5)框架基于ajax与后台数据交互操作。分享给大家供大家参考,具体如下: ajax最大的一点是页面无刷新,在页面内与服务器通信,给用...

本文实例讲述了tp5(thinkphp5)框架基于ajax与后台数据交互操作。分享给大家供大家参考,具体如下:

ajax最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

最近在用tp5开发企业微应用,很有收获,觉得最需要注意的是thinkphp5与前台之间数据传递和交互。经过几天的摸索,将调试通过的代码贴出,供需要的人参考。今天的分享是用tp5做一个表单的提交。

前端代码

<!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>
   function ajaxpost(){
    var formdata = $("#myform").serialize();
    //serialize() 方法通过序列化表单值,创建 url 编码文本字符串,这个是jquery提供的方法
    $.ajax({
     type:"post",
     url:"{:url('index/index/reg')}",  //数据传输的控制器方法
     data:formdata,//这里data传递过去的是序列化以后的字符串
     success:function(data){
      $("#content").append(data);//获取成功以后输出返回值
     }
    });
   }
  </script>
 </head>
 <body>
  <form id="myform">
   <!--这里给表单起个id用于获取表单并序列化-->
   <input type="text" name="account" />
   <input type="password" name="passwd" />
   <button onclick="ajaxpost()">---------</button>
  </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);
  }
}

tp5有很多的更新,所以,代码不多,但绝对是精华。 需要注意的地方:前台的url、data的格式设置 后台返回的信息的组织模式。

更多关于thinkphp相关内容感兴趣的读者可查看本站专题:《thinkphp入门教程》、《thinkphp模板操作技巧总结》、《thinkphp常用方法总结》、《codeigniter入门教程》、《ci(codeigniter)框架进阶教程》、《zend framework框架入门教程》及《php模板技术总结》。

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