TP5中ajax与后台数据的交互

最新推荐文章于 2021-12-15 18:18:26 发布
最新推荐文章于 2021-12-15 18:18:26 发布
阅读量6.1k 收藏 2
点赞数
分类专栏： 后端开发 文章标签： ajax tp5 异步刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz_lkw/article/details/79723361
版权
        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.      <!--这里给表单起个id用于获取表单并序列化-->
  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. }



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

zz_lkw
关注
专栏目录
TP5框架基于ajax与后台数据交互
帅波的博客
08-25 1383
方法一： serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法 前端代码 <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
01-20
本文实例讲述了TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法。分享给大家供大家参考，具体如下： 方法一： serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法 前端代码 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>ajax交互</title> [removed][removed] [removed] $('.but').click(f
tp5通过ajax 与后台进行数据交互
木头生辉的专栏
08-11 520
前端 $.ajax({ type:"post", url:"{:url('rizhi/index/to_day')}", //数据传输的控制器方法 data:{year01:$('.sc-select-year').text()},//这里data传递过去的是序列化以后的字符串 success:function(data){ // $str = json_decode($data,true); // c
php——tp5中前后端的数据交互
hero_xsx的博客
11-06 3178
一般情况下会使用smarty模板引擎进行前后端分离，但是在tp框架中，应该如何进行前后端数据交互呢？ 如图，这是tp5下一个自建的login模块，里头包括controller控制器，model模型和view视图。在controller\login.php\index中渲染调取view\login\login.html，并且利用smarty模板引擎将标语$logo的值输出到前端...
tp5 ajax传参,Ajax 不同页面传参（TP5以及bootstrap框架下）
weixin_39989973的博客
08-05 263
//team 页面 传参页面$(function(){$('#team2 ').click(function(){var valTable=$("#table").bootstrapTable("getAllSelections");var projectname = valTable[0].projectname;var teamname = valTable[0].teamname;$.aja...
tp5中利用接口获取返回数据的方法
孙_常乐的博客
04-18 5757
ps：代码内容为工作上的记录，最重要的是知道逻辑，其他的参数的命名根据自己需要进行修改public function jwFansShopping(){ $this-&gt;assign('login_user_id',Session::get('login_user_id')?Session::get('login_user_id'):0);                  /* 获取专...
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
10-18
主要介绍了TP5(thinkPHP5)框架基于ajax与后台数据交互操作,结合实例形式分析了thinkPHP5前端基于jQuery的ajax数据提交及后台数据接收、处理相关操作技巧,需要的朋友可以参考下
tp5中使用ajax
weixin_44432032的博客
08-20 636
function getinfo(id){ $.get("{:url('news/info')}",{id:id},function(data){ $(".modal-body").html(data); }) } function statics(id){ $.post("{:url('news/statics')}",{id:id},function(data){ if(data.statics==1){ $(".statics"+id).html("<butt
tp5 ajax 路由,tp5中ajax方式提交表单
weixin_42171132的博客
08-05 413
用ajax提交表单，迅速，快捷，实现页面无刷新提交表单。ajax批删姓名年龄地址添加$("#sub").click(function(){var name = $("#name").val();var age = $("#age").val();var address = $("#address").val();$.ajax({method:"POST",data:{name:name,age:a...
使用ajax上传input[type="file"]文件（tp5框架下的详细教程）
weixin_44547510的博客
04-25 1232
最近在做项目的时候遇到这样的一个问题，我将input标签与button标签做成一个上传文件的按钮组，如：，但是不想用form表单提交数据，想利用ajax异步提交数据。找了网上的资源后，发现可以利用FormData结合ajax异步传递数据，不再利用form表单提交。关于FormData详细内容可以参考: 传送门 。 1.首先，先编写出一个可以接受文件的按钮，我是利用bootstrap写的，其他样式...
TP5的文件下载功能（方法）
qq_41821881的博客
10-10 1万+
传的值对的话可以直接用这个方法（记住不能封装成model） public function xiazai(Request $request) {     $file_n = Db::name("youxi")-&gt;where("uid",$request-&gt;param("id"))-&gt;find();     if(!$file_n){         return "暂无下载入...
TP框架使用ajax的post请求方式下载文件
科小洋的博客
12-15 1124
详细流程不展示了 直接展示 最后下载的 //主要流程 //主要流程 //主要流程 //主要流程 //把文件转成文件流的形式 ob_start(); $xlsData = ob_get_contents(); ob_end_clean(); $data = [ 'file' => "data:application/vnd.ms-excel;base64," . base64_encode($xlsData),
tp5 获取接口数据 curl 原生ajax请求获取 juqery获取 及 jsonp请求跨域
猪年大吉的博客
04-10 1594
//使用file_get_contents获取接口数据 public function api(){ $url="http://172.16.112.3/api.php"; //url地址 $data=file_get_contents($url); print_r($data); } //使用curl获取接口数据 public function api(){ ...
php通过ajax下载文件,请教通过ajax调用php下载文件
weixin_29720641的博客
03-10 299
我遇到了一个稍微困难的问题：1.发送带有POST数据的Ajax请求，让服务器生成一个ZIP文件；2.获得响应；3.下载ZIP文件所以我就是这样做的(使用JQuery来处理Ajax请求)：初步员额请求：var parameters = {pid : "mypid","files[]": ["file1.jpg","file2.jpg","file3.jpg"]}var options = {...
tp5接收前台传的值_TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
weixin_42551508的博客
12-29 1308
本文实例讲述了TP5(thinkPHP5)框架基于ajax与后台数据交互操作。分享给大家供大家参考，具体如下：Ajax最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器...
tp5.1实现文件上传下载
weixin_44423938的博客
03-17 2192
我的大体需求就是管理员发布一个文件，然后所有文件在客户端进行渲染，界面以超链接形式。如下（客户端前端界面） 首先说一下思想，管理员通过一个编辑框选择上传附件，把管理员上传的附件放在服务器的一个文件夹中，同时把文件文件名（因为上传的命名规则是md5,没有规则，这里也可以直接把文件的路径放进去，看自己喜欢）放在数据库中。然后客户端的前端通过js进行动态显示所有文件名，当点击相应超链接时实现下载。 上...
关于TP5的ajax写法
fly_on_the_sky的博客
02-26 8413
[html] view plain copy&lt;!DOCTYPE html&gt;    &lt;html&gt;        &lt;head&gt;            &lt;meta charset="UTF-8"&gt;            &lt;title&gt;&lt;/title&gt;            &lt;script src="//c
TP5 ajax提交表单
热门推荐
php菜鸟技术天地
09-25 1万+
function ajaxPost(){ var formData = $("#myform").serialize(); //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法 $.ajax({
tp5 ajax实现前后端数据交互
最新发布
10-01
TP5是指ThinkPHP5框架，它可以通过AJAX实现前后端数据交互。AJAX是一种异步的JavaScript和XML技术，可以在不重新加载整个网页的情况下，通过后台服务器请求来更新部分网页内容。 首先，在TP5中实现AJAX交互需要创建...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值