本文實(shí)例講述了thinkphp5 + ajax 使用formdata提交數(shù)據(jù)（包括文件上傳） 后臺(tái)返回json。分享給大家供大家參考，具體如下：
知識(shí)點(diǎn)總結(jié)
1.json格式標(biāo)準(zhǔn)
{
'key':"value"
}
{"state":"1","msg":"\u7b80\u5386\u6295\u9012\u6210\u529f\uff01"}
前端jquery ajax提交formdata
formdata 獲取表單數(shù)據(jù) 包括文件上傳
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>手機(jī)號(hào)/label>
input type="text" name="post[iphone]" id="iphone" required>
/div>
div class="col-lg10 col-md-10 col-xs-12 m2rem">
label>附件簡(jiǎn)歷：（您的詳細(xì)信息請(qǐng)都寫在簡(jiǎn)歷上,只接受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> 選擇要上傳的簡(jiǎn)歷/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('請(qǐng)求成功！')
console.log(res)
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
console.log('出錯(cuò)啦！')
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
}
})
}
/script>
php json_encode()函數(shù)轉(zhuǎn)成json
$callbackinfo = array(
'state' => '1',
'msg' => '簡(jiǎn)歷投遞成功！',
);
$jsondata =json_encode($callbackinfo);
echo $jsondata;
問(wèn)題
1.前端SyntaxError: Unexpected token in JSON at position 0 報(bào)錯(cuò)
報(bào)錯(cuò)原因
使用的thinkphp5
沒(méi)想到是因?yàn)槭褂昧薲ump()函數(shù) var_dump 這些最后echo出來(lái)的不正確導(dǎo)致的，還要要按標(biāo)準(zhǔn)格式來(lái)啊
解決方法
去掉dump相似的函數(shù)
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- TP5(thinkPHP5)框架使用ajax實(shí)現(xiàn)與后臺(tái)數(shù)據(jù)交互的方法小結(jié)
- ThinkPHP5.1+Ajax實(shí)現(xiàn)的無(wú)刷新分頁(yè)功能示例
- ThinkPHP5 通過(guò)ajax插入圖片并實(shí)時(shí)顯示(完整代碼)
- Thinkphp5框架ajax接口實(shí)現(xiàn)方法分析
- thinkPHP+mysql+ajax實(shí)現(xiàn)的仿百度一下即時(shí)搜索效果詳解
- ThinkPHP框架結(jié)合Ajax實(shí)現(xiàn)用戶名校驗(yàn)功能示例
- thinkPHP利用ajax異步上傳圖片并顯示、刪除的示例
- TP5(thinkPHP5)框架基于ajax與后臺(tái)數(shù)據(jù)交互操作簡(jiǎn)單示例
- ThinkPHP 5 AJAX跨域請(qǐng)求頭設(shè)置實(shí)現(xiàn)過(guò)程解析
