thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例


Posted in PHP onMarch 02, 2020

本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json。分享给大家供大家参考,具体如下:

知识点总结

1.json格式标准

{

'key':"value"

}

{"state":"1","msg":"\u7b80\u5386\u6295\u9012\u6210\u529f\uff01"}

thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例

thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例

前端jquery ajax提交formdata 

$.ajax({

})

thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例

 formdata 获取表单数据 包括文件上传

thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例

 HTML

<form class="am-form" id="recruitinfo">

        <div class="col-lg6 col-md-6 col-xs-12 m1rem">
          <label>姓名</label>
          <input type="text" name="post[name]" id="name" required >
        </div>

        <div class="col-lg6 col-md-6 col-xs-12 m1rem">
          <label>手机号</label>
          <input type="text" name="post[iphone]" id="iphone" required>
        </div>

        <div class="col-lg10 col-md-10 col-xs-12 m2rem">

          <label>附件简历:(您的详细信息请都写在简历上,只接受word文档)</label>

          <div class="am-form-group am-form-file">
            <button type="button" class="am-btn am-btn-danger am-btn-sm">
              <i class="am-icon-cloud-upload"></i> 选择要上传的简历</button>
            <input id="doc-form-file" type="file"  name="doc" >
          </div>
          <div id="file-list"></div>
          <script>
            $(function() {
              $('#doc-form-file').on('change', function() {
                var fileNames = '';
                $.each(this.files, function() {
                  fileNames += '<span class="am-badge">' + this.name + '</span> ';
                });
                $('#file-list').html(fileNames);
              });
            });
          </script>

          <input type="hidden"  name="post[jobname]" id="jobname"  value="{$data.job}">
          <input type="hidden"  name="post[jobnameid]" id="jobnameid" value="{$data.id}">


        </div>

        <div class="col-lg-6 col-md-6 col-xs-12">
          <button type="submit" class="am-btn am-btn-primary" onclick="submitform()">提交</button>
          <a href="javascript:window.history.back(-1);" rel="external nofollow" class="am-btn am-btn-default">返回</a>
        </div>

      </form>

 JS

<script type="text/javascript">
        function submitform() {

          event.preventDefault();
          var form =document.getElementById('recruitinfo'),
            formdata = new FormData(form);


          var url = '{:url("recruitinfo/postfrom")}';


          $.ajax({
            url:url,
            type:'post',
            data:formdata,
            dataType:'json',
            processData:false,
            contentType:false,
            success:function (res) {
              console.log('请求成功!')
              console.log(res)
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
              console.log('出错啦!')
              console.log(XMLHttpRequest);
              console.log(textStatus);
              console.log(errorThrown);
            }
          })

        }
      </script>

php json_encode()函数转成json

$callbackinfo = array(
          'state' => '1',
          'msg'  => '简历投递成功!',
        );
        

        $jsondata =json_encode($callbackinfo);

       
        echo $jsondata;

问题

1.前端SyntaxError: Unexpected token < in JSON at position 0 报错

报错原因

使用的thinkphp5

没想到是因为使用了dump()函数 var_dump 这些最后echo出来的不正确导致的,还要要按标准格式来啊

解决方法

去掉dump相似的函数

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

PHP 相关文章推荐
PHP读取XML值的代码(推荐)
Jan 01 PHP
php获取服务器信息的实现代码
Feb 04 PHP
php+js实现异步图片上传实例分享
Jun 02 PHP
ci检测是ajax还是页面post提交数据的方法
Nov 10 PHP
PHP中定义数组常量(array常量)的方法
Nov 17 PHP
PHP使用memcache缓存技术提高响应速度的方法
Dec 26 PHP
php数组键名技巧小结
Feb 17 PHP
php图像处理类实例
Jul 28 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
Oct 29 PHP
thinkphp5 migrate数据库迁移工具
Feb 20 PHP
TP5框架实现签到功能的方法分析
Apr 05 PHP
Thinkphp集成抖音SDK的实现方法
Apr 28 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
Mar 02 #PHP
让whoops帮我们告别ThinkPHP6的异常页面
Mar 02 #PHP
php高性能日志系统 seaslog 的安装与使用方法分析
Feb 29 #PHP
PHP中关于php.ini参数优化详解
Feb 28 #PHP
php多进程并发编程防止出现僵尸进程的方法分析
Feb 28 #PHP
php 的多进程操作实践案例分析
Feb 28 #PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
Feb 28 #PHP
You might like
搜索引擎技术核心揭密
2006/10/09 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python计算最大优先级队列实例
2013/12/18 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
django框架创建应用操作示例
2019/09/26 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
校园公益广告语
2014/03/13 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
学校党支部承诺书
2015/04/30 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
交通事故被告代理词
2015/05/23 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL