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实现维护文件代码
Jun 14 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
Mar 29 PHP
php去除头尾空格的2种方法
Mar 16 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
May 13 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
May 19 PHP
PHP常用的三种设计模式
Feb 17 PHP
php生成无限栏目树
Mar 16 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
Sep 27 PHP
PHP实现重载的常用方法实例详解
Oct 18 PHP
PHP里的$_GET数组介绍
Mar 22 PHP
PHP中str_split()函数的用法讲解
Apr 11 PHP
thinkphp5.1 框架钩子和行为用法实例分析
May 25 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
PHP 模拟$_PUT实现代码
2010/03/15 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
python字符串,数值计算
2016/10/05 Python
Python算法应用实战之栈详解
2017/02/04 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python微信撤回监测代码
2019/04/29 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python带参数打包exe及调用方式
2019/12/21 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
python实现移动木板小游戏
2020/10/09 Python
档案管理员岗位职责
2013/12/01 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
医院保洁服务方案
2014/06/11 职场文书
人力资源管理求职信
2014/08/07 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
个人年终总结开头
2015/03/06 职场文书
入党积极分子考察意见
2015/06/02 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
Elasticsearch 基本查询和组合查询
2022/04/19 Python