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

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

发布:smiling　来源: PHP粉丝网 　添加日期：2021-10-27 15:10:25　浏览: 评论：0　

本文实例讲述了TP5(thinkPHP5)框架基于ajax与后台数据交互操作，分享给大家供大家参考，具体如下：

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

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

前端代码：

  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.    function ajaxPost(){ 
  9.     var formData = $("#myform").serialize(); 
  10.     //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法 
  11.     $.ajax({ 
  12.      type:"post", 
  13.      url:"{:url('Index/index/reg')}",  //数据传输的控制器方法 
  14.      data:formData,//这里data传递过去的是序列化以后的字符串 
  15.      success:function(data){ 
  16.       $("#content").append(data);//获取成功以后输出返回值 
  17.      } 
  18.     }); 
  19.    } 
  20.   </script> 
  21.  </head> 
  22.  <body> 
  23.   <form id="myform"> 
  24.    <!--这里给表单起个id用于获取表单并序列化--> 
  25.    <input type="text" name="account" /> 
  26.    <input type="password" name="passwd" /> 
  27.    <button onclick="ajaxPost()">---------</button> 
  28.   </form> 
  29.   <div id="content"> 
  30.   </div> 
  31.  </body> 
  32. </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. } 

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

Tags: thinkPHP5框架 ajax交互

分享到：

相关文章

推荐文章

热门文章

最新评论文章