2018-03-20 前后端分離項目會有哪些坑之ajax

  1. 首先請看下面的ajax封裝函數:
    function ajaxset_new(posturl, postdata, successfunction) {
    $.ajax({
    // contentType: "application/json; charset=utf-8",
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    url: posturl,
    type: 'POST',
    dataType: 'json',
    data: postdata,
    cache: false,
    async: false, //是否異步請求
    success: successfunction,
    complete: showdata,
    statusCode: {
    404: ajaxset_alert
    },
    error: errorHandling
    });
    }
    第二個content-type是最老的最常用的——可以說讓我想起了做servlet的經驗漾稀。使用它可以達到自動解析postdata里面的參數值和對嫉柴,就像解析了get請求中的url里的參數值和對涩惑。
    但是如果postdata只是json數據呢?此時相對于第一種content-type是否就沒有區(qū)別了藏杖?第一種一直都是一種相應頭,進來逐漸被用作請求頭脉顿。這個時候前端提交的數據是 json格式的字符串

form的enctype屬性為編碼方式蝌麸,常用有兩種:application/x-www-form-urlencoded和multipart/form-data,默認為application/x-www-form-urlencoded艾疟。 當action為get時候来吩,瀏覽器用x-www-form-urlencoded的編碼方式把form數據轉換成一個字串(name1=value1&name2=value2...),然后把這個字串append到url后面蔽莱,用?分割弟疆,加載這個新的url。 當action為post時候盗冷,瀏覽器把form數據封裝到http body中怠苔,然后發(fā)送到server。 如果沒有type=file的控件正塌,用默認的application/x-www-form-urlencoded就可以了嘀略。 但是如果有type=file的話,就要用到multipart/form-data了乓诽。瀏覽器會把整個表單以控件為單位分割帜羊,并為每個部分加上Content-Disposition(form-data或者file),Content-Type(默認為text/plain),name(控件name)等信息,并加上分割符(boundary).

POST http://www.example.com HTTP/1.1
Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

最近老是有前端同事問我在用Aangular的$http服務器的時候向服務器發(fā)送數據不成功鸠天,后來我測試了一下讼育,發(fā)現(xiàn)服務器的接口接收的數據的格式是form表單形式,而Angular的$http服務發(fā)送的post請求默認是json數據格式所以數據接收不到

ajax傳JSON時設置的contenttype 如果是application/json或者text/json時,JAVA中request.getParameter("")怎么也接收不到數據奶段,如果將contenttype 換成application/x-www-form-urlencoded 就好了

contentType: 告訴服務器饥瓷,我要發(fā)什么類型的數據

dataType:告訴服務器,我要想什么類型的數據痹籍,如果沒有指定呢铆,那么會自動推斷是返回
XML,還是JSON蹲缠,還是script棺克,還是String。

application/x-javascript text/xml->xml數據 application/x-javascript->json對象 application/x-www-form-urlencoded->表單數據 application/json;charset=utf-8 -> json數據

不使用contentType: “application/json”則data可以是對象
data: { id: nodeId },
使用contentType: “application/json”則data只能是json字符串
data: "{'id': " + nodeId +"}",

$.ajax({
url: actionurl,
type: "POST",
datType: "JSON",
data: { id: nodeId },
async: false,
success: function () {}
});

$.ajax({
url: actionurl,
type: "POST",
datType: "JSON",
contentType: "application/json"
data: "{'id': " + nodeId +"}",
async: false,
success: function () {}
});

http://blog.csdn.net/calyxmelo/article/details/54969244

選擇application/x-www-form-urlencoded還是application/json线定,得看你是否有從request.paramter獲取請求數據的需求娜谊。
http://blog.csdn.net/HEL_WOR/article/details/52123712

最近在看書時才真正搞明白,服務器為什么會對表單提交和文件上傳做特殊處理斤讥,因為表單提交數據是名值對的方式纱皆,且Content-Type為application/x-www-form-urlencoded,而文件上傳服務器需要特殊處理芭商,普通的post請求(Content-Type不是application/x-www-form-urlencoded)數據格式不固定派草,不一定是名值對的方式,所以服務器無法知道具體的處理方式蓉坎,所以只能通過獲取原始數據流的方式來進行解析澳眷。

jquery在執(zhí)行post請求時,會設置Content-Type為application/x-www-form-urlencoded蛉艾,所以服務器能夠正確解析钳踊,而使用原生ajax請求時,如果不顯示的設置Content-Type勿侯,那么默認是text/plain拓瞪,這時服務器就不知道怎么解析數據了,所以才只能通過獲取原始數據流的方式來進行解析請求數據助琐。
http://blog.csdn.net/mhmyqn/article/details/25561535

對我們而已最大的區(qū)別祭埂,老的content-type不會導致在前端發(fā)出去options請求,而是直接post請求兵钮。這樣后端可以使用tomcat(bw tomcat不支持options請求蛆橡,而此處剛好省掉了options請求),同事只需要設置Access-Control-Allow-Origin這一個http頭允許"*"就可以了掘譬,可以忽略其他多個跨域相關的http header.

那么使用老的content-type,在設計adn項目時put請求出過問題泰演?出現(xiàn)了options請求,所以修改了bw http connection的serverType到httpComponent葱轩?

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末睦焕,一起剝皮案震驚了整個濱河市藐握,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌垃喊,老刑警劉巖猾普,帶你破解...
    沈念sama閱讀 221,430評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異本谜,居然都是意外死亡初家,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評論 3 398
  • 文/潘曉璐 我一進店門耕突,熙熙樓的掌柜王于貴愁眉苦臉地迎上來笤成,“玉大人,你說我怎么就攤上這事眷茁。” “怎么了纵诞?”我有些...
    開封第一講書人閱讀 167,834評論 0 360
  • 文/不壞的土叔 我叫張陵上祈,是天一觀的道長。 經常有香客問我浙芙,道長登刺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,543評論 1 296
  • 正文 為了忘掉前任嗡呼,我火速辦了婚禮纸俭,結果婚禮上,老公的妹妹穿的比我還像新娘南窗。我一直安慰自己揍很,他們只是感情好,可當我...
    茶點故事閱讀 68,547評論 6 397
  • 文/花漫 我一把揭開白布万伤。 她就那樣靜靜地躺著窒悔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪敌买。 梳的紋絲不亂的頭發(fā)上简珠,一...
    開封第一講書人閱讀 52,196評論 1 308
  • 那天,我揣著相機與錄音虹钮,去河邊找鬼聋庵。 笑死,一個胖子當著我的面吹牛芙粱,可吹牛的內容都是我干的祭玉。 我是一名探鬼主播,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼宅倒,長吁一口氣:“原來是場噩夢啊……” “哼攘宙!你這毒婦竟也來了屯耸?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,671評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蹭劈,失蹤者是張志新(化名)和其女友劉穎疗绣,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體铺韧,經...
    沈念sama閱讀 46,221評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡多矮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,303評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了哈打。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片塔逃。...
    茶點故事閱讀 40,444評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖料仗,靈堂內的尸體忽然破棺而出湾盗,到底是詐尸還是另有隱情,我是刑警寧澤立轧,帶...
    沈念sama閱讀 36,134評論 5 350
  • 正文 年R本政府宣布格粪,位于F島的核電站,受9級特大地震影響氛改,放射性物質發(fā)生泄漏帐萎。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,810評論 3 333
  • 文/蒙蒙 一胜卤、第九天 我趴在偏房一處隱蔽的房頂上張望疆导。 院中可真熱鬧,春花似錦葛躏、人聲如沸澈段。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽均蜜。三九已至,卻和暖如春芒率,著一層夾襖步出監(jiān)牢的瞬間囤耳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評論 1 272
  • 我被黑心中介騙來泰國打工偶芍, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留充择,地道東北人。 一個月前我還...
    沈念sama閱讀 48,837評論 3 376
  • 正文 我出身青樓匪蟀,卻偏偏與公主長得像椎麦,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子材彪,可洞房花燭夜當晚...
    茶點故事閱讀 45,455評論 2 359

推薦閱讀更多精彩內容