php form提交json数据,thinkphp5 + ajax 使用formdata提交数据（包括文件上传）后台返回json完整实例...

川长思鸟来 2023-01-17 08:25 72阅读 0赞

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

知识点总结

1.json格式标准

\{

'key':"value"

\}

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

![068b7428edf04ec8eeac6fd641415395.png][]

![9037e7b0ebf4dc98692dbf5fc07d47cd.png][]

前端jquery ajax提交formdata

$.ajax(\{

\})

![7da8213bff7f4fec2174fb845de36582.png][]

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

![1753ceb9f0eb77ee256331871c80e6a4.png][]

HTML

姓名

手机号

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

选择要上传的简历

$(function() \{

$('\#doc-form-file').on('change', function() \{

var fileNames = '';

$.each(this.files, function() \{

fileNames += '' + this.name + ' ';

\});

$('\#file-list').html(fileNames);

\});

\});

提交

返回

JS

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);

\}

\})

\}

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程序设计有所帮助。

[068b7428edf04ec8eeac6fd641415395.png]: /images/20221021/5ba87cd4b2754ef79f366e620e6dc744.png
[9037e7b0ebf4dc98692dbf5fc07d47cd.png]: /images/20221021/c6bb382283164cf695d2bbdb7189b25c.png
[7da8213bff7f4fec2174fb845de36582.png]: /images/20221021/b790938cb53a41cfb005ac6bd121c18e.png
[1753ceb9f0eb77ee256331871c80e6a4.png]: /images/20221021/7a5027031a3a41e796fd66b95e2b65e4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，72人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 将el-form数据，转换为json post 提交Spring Boot后台

第一步：创建一个表单数据集（定时任务过滤参数实体）表单数据集（定时任务过滤参数实体）定义： ![watermark_type_ZmFuZ3poZW5naGVpdGk_

拼搏现实的明天。/ 2023年10月10日 13:09/ 0 赞/ 2 阅读

相关 php form提交json数据,thinkphp5 + ajax 使用formdata提交数据（包括文件上传）后台返回json完整实例...

本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json。分享给大家供大家参考，具体如下：知识点总结 1.json格

川长思鸟来/ 2023年01月17日 08:25/ 0 赞/ 73 阅读

相关使用ajax提交form表单，包括ajax文件上传

[使用ajax提交form表单，包括ajax文件上传][ajax_form_ajax] http://www.cnblogs.com/zhuxiaojie/p/47839

快来打我*/ 2022年07月24日 12:15/ 0 赞/ 233 阅读

相关 ajax 请求后台数据(及使用FormData对象提交表单及上传图片）

js <script type="text/javascript"> $(function(){ $('submit').click(funct

冷不防/ 2022年06月10日 12:43/ 0 赞/ 195 阅读

相关 jQuery ajax()使用serialize()提交form数据

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，如： <for

红太狼/ 2022年05月30日 10:18/ 0 赞/ 164 阅读

相关 ajax使用POST提交json数据

$(document).ready(function () { var schoolList={ "pageCount": "2",

梦里梦外;/ 2022年05月29日 12:06/ 0 赞/ 250 阅读

相关 JQuery 提交json数据

提交代码 $.post( "${pageContext.request.contextPath}/EditServlet?method=creat

系统管理员/ 2022年05月19日 13:36/ 0 赞/ 297 阅读

相关 Form表单提交JSON数据

1.定义方法 //定义serializeObject方法，序列化表单 $.fn.serializeObject = function() {

迈不过友情╰/ 2022年04月18日 03:38/ 0 赞/ 683 阅读

相关 PHP 使用 curl 提交 json 格式数据

$data = array("name" => "Hagrid", "age" => "36"); $data_string = json_encode($da

ゝ一纸荒年。/ 2022年01月06日 13:35/ 0 赞/ 213 阅读

相关 Ajax利用FormData提交文件和数据

一、ajax提交纯表单（不包含文件或二进制或非ASCII数据） ajax提交表单绕了很久，遇到一些问题进行测试下以加深理解，测试使用浏览器 49.0.2623.11

灰太狼/ 2021年09月15日 03:20/ 0 赞/ 375 阅读