您的位置：首页 > 编程语言 > PHP开发

TP5中ajax与后台数据的交互

2018-03-28 10:07 274 查看

Ajax最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。        最近在用tp5开发企业微应用，很有收获，觉得最需要注意的是thinkphp5与前台之间数据传递和交互。经过几天的摸索，将调试通过的代码贴出，供需要的人参考。今天的分享是用TP5做一个表单的提交。
前端代码


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></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">
     
      <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的格式设置后台返回的信息的组织模式。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax tp5 异步刷新

相关文章推荐

新的分享

章节导航