TP5中ajax与后台数据的交互

素颜马尾好姑娘i 2022-05-11 00:54 170阅读 0赞

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

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

**    前端代码**

**    **

1.  <!DOCTYPE html>
2.  <html>
3.    <head>
4.      <meta charset="UTF-8">
5.      <title></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.      
25.       <input type="text" name="account" />
26.       <input type="password" name="passwd" />
27.       <button οnclick="ajaxPost()">---------</button>
28.     </form>
29.     <div id="content">
30.     </div>
31.   </body>
32. </html>
33.

**后端代码：**

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.  \}