Fọọmu AJAX ń retí JSON ṣùgbọ́n ó ń gba HTML: tẹ̀lé ìdáhùn náà ní ìgbésẹ̀ kọ̀ọ̀kan
Ìdáhùn 200 kì í ṣe ẹ̀rí pé JSON ni. Tẹ̀lé pánẹ́lì Nẹ́tíwọ́kì ní ìgbésẹ̀ kọ̀ọ̀kan kí o sì ya àwọn ìkùnà gbígbé, ìfihàn àti àdéhùn sọ́tọ̀.
Wọ́n fi fọọmu náà ránṣẹ́, ìyípo náà farahàn, kí kọ́nsóòlì sì sọ pé àmì < tí a kò retí wà nínú JSON ní ipò 0. Ojú-ìwé náà fúnra rẹ̀ ń gbé dáadáa, ìdí nìyẹn tí èrò àkọ́kọ́ fi ń dá ẹ̀bi lé atúpalẹ̀sọ̀rọ̀ tàbí ojú-ẹ̀rọ náà. Ní ọ̀pọ̀ ìgbà kò sí ọ̀kan nínú àwọn méjéèjì tí ó kópa: fífi ránṣẹ́ jẹ́ ìbéèrè tí ó yàtọ̀ sí gbígbé ojú-ìwé náà, ó sì padà wá pẹ̀lú nnkan tí kì í ṣe JSON. Ṣiṣẹ́ ní ọ̀nà tí aṣàwákiri fi ń ṣàfihàn rẹ̀ gan-an, nítorí àwọn ìdáhùn mẹ́rin tí ó ṣeé ṣe nílò àtúnṣe mẹ́rin tí ó yàtọ̀.
Ìgbésẹ̀ 1: mú fífi ránṣẹ́ tí ó ṣẹlẹ̀ gan-an
Ṣí pánẹ́lì Nẹ́tíwọ́kì kí o tó ránṣẹ́, ṣètò àkọsílẹ̀ kí ó pa àwọn àkọsílẹ̀ mọ́ láàárín ìrìnàjò, kí o sì ṣe ìdánwò fífi ránṣẹ́ kan tí kò lè ṣe ìpalára lórí àkọọ́lẹ̀ tí a gbà ọ́ láyè láti lò. Yan ìbéèrè tí fọọmu fúnra rẹ̀ bẹ̀rẹ̀, kì í ṣe ìbéèrè ìwé ojú-ìwé náà.
Ṣọ́ra pẹ̀lú àwọn àlẹ̀mọ́. Àlẹ̀mọ́ XHR tàbí Fetch rọrùn, ṣùgbọ́n tí ìkànnì náà bá ṣì ń fi iframe tí a fi pamọ́ tàbí fọọmu tí a ṣèdá lọ́nà dívẹ́rẹ́ ránṣẹ́, àlẹ̀mọ́ náà yóò fi ìbéèrè kan ṣoṣo tí ó ṣe pàtàkì pamọ́. Kọ́kọ́ fi ránṣẹ́ lẹ́ẹ̀kan láìsí àlẹ̀mọ́ kí o sì wo ohun tí ó jáde.
Fún ìbéèrè tí a yàn, kọ nnkan mẹ́fà kí o tó ṣàlàyé ohunkóhun: ọ̀nà náà, URL kíkún pẹ̀lú okùn ìbéèrè, ipò náà, ẹ̀wọ̀n ìtúnjúwe, Content-Type ìdáhùn náà, àti àwọn ìlà àkọ́kọ́ ti ara. Ìtọ́ka pánẹ́lì Nẹ́tíwọ́kì Chrome DevTools bo àwọn ìwò Headers, Response àti Initiator níbi tí àwọn wọ̀nyí wà, àwọn pánẹ́lì tí ó dọ́gba nínú àwọn aṣàwákiri mìíràn sì ń fi àwọn pápá kan náà hàn.
Ìgbésẹ̀ 2: jẹ́rìí pé ìbéèrè tí o ń rò ni
Iye tí ó yani lẹ́nu nínú àwọn àṣìṣe JSON ni àṣìṣe ìtọ́sọ́nà. Tí olùṣàkóso fífi ránṣẹ́ bá ju ìyàtọ̀ jáde kí ó tó pe preventDefault, aṣàwákiri yóò ṣe POST fọọmu àbínibí sí àdírẹ́sì tí àmì action sọ, olùpín yóò sì dáhùn pẹ̀lú ojú-ìwé HTML kíkún. Olùṣàkóso kò ní ṣiṣẹ́ rárá, nítorí náà a kò béèrè JSON rárá.
Fi URL inú pánẹ́lì wé URL tí JavaScript rẹ ń pè. Wá ìtúnjúwe tí ó parí níbòmíì, slash ìparí tí ó ṣáìn tàbí tí ó pọ̀ jù, àìbáramu ọ̀nà, tàbí fọọmu tí ń fi ránṣẹ́ sí ọ̀nà ìbátan láti ojú-ìwé tí ó ti kúrò. Tẹ̀lé ẹ̀wọ̀n ìtúnjúwe náà dé ìparí kí o sì kọ URL ìkẹyìn, kì í ṣe èyí àkọ́kọ́.
Lẹ́yìn náà ṣàyẹ̀wò olùbẹ̀rẹ̀. Tí ìbéèrè náà bá wá láti ìrìnàjò ìwé kì í ṣe láti script rẹ, o ti rí ìṣòro náà, kò sì sí àyípadà kankan nínú atúpalẹ̀sọ̀rọ̀ ìdáhùn tí yóò ràn ọ́ lọ́wọ́.
Ìgbésẹ̀ 3: pín àbájáde sí ẹ̀ka mẹ́rin
Gbogbo àbájáde ń bọ́ sínú ọ̀kan gbá tirẹ̀ nínú ìwọ̀nyí, ẹ̀ka náà sì ń pinnu ibi tí o máa wò lẹ́yìn náà.
| What you see | Category | Where to look |
|---|---|---|
| Request never finishes, TLS or connection error | No usable response | Endpoint reachability, certificate, front-end timeout |
| Request completes, script gets an opaque failure | Access blocked | Cross-origin policy, credentials mode, missing response header |
| 200 with an HTML body or a login form | Wrong representation | Redirect, expired session, route fallback, error handler |
| Body begins with a notice then valid JSON | Wrong representation | Server-side warning output before serialisation |
| Valid JSON, framework rejects it | Contract mismatch | Envelope shape, field names, value types |
Àwọn ìlà àárín ni àwọn tí ènìyàn ń ṣàyẹ̀wò tí kò tọ́, nítorí ipò náà jẹ́ 200. Ojú-ìwé ìwọlé tí a dé lẹ́yìn ìtúnjúwe jẹ́ ìdáhùn HTTP tí ó dára pátápátá àti ìwé JSON tí ó burú gan-an. Irú àkóónú application/json kò tún èyí ṣe: àmì ni, ara tí a fi àmì tí kò tọ́ sí ṣì kò lè ṣe ìtúpalẹ̀. Ìwọlé tí a dílẹ̀ ni ìlà tí ó dà bí ìbéèrè tí ó ti parí: pánẹ́lì fi ipò hàn, ṣùgbọ́n ìlànà orísun ìkọjá ń dá ara dúró, nítorí náà fún script tí ń pè ó kò wúlò bí àkókò tí ó ti tán.
Ìlà kẹrin náà wọ́pọ̀ bákan náà lórí àwọn àkójọ PHP àti ìkànnì àtijọ́. Ìkìlọ̀ nípa àìlò tí a tẹ̀ jáde kí ó tó ẹrù tí a kódà ń dá ara tí kò sí atúpalẹ̀sọ̀rọ̀ JSON kankan tí yóò gbà, àti ní ọ̀pọ̀ ìgbà ìkìlọ̀ yẹn ni àlàyé gbogbo rẹ̀.
Ìgbésẹ̀ 4: ka àṣìṣe atúpalẹ̀sọ̀rọ̀ gẹ́gẹ́ bí ó ti wà
Ọ̀rọ̀ àṣìṣe náà dárúkọ àmì àkọ́kọ́ tí ó fọ́ ìtúpalẹ̀ náà, èyí sì sábà ń fi ẹ̀ka náà hàn láìsí àròyé kankan.
| Error text (Chrome/V8) | What it means |
|---|---|
| Unexpected token < in JSON at position 0 | The body starts with markup: an HTML page or an error document |
| Unexpected end of JSON input | Empty body, or the response was truncated |
| Unexpected token o in JSON at position 1 | You parsed something already parsed, typically an object rather than text |
| Unexpected token u | The body starts with the bare word undefined, usually an empty response rendered as a string |
Ara òfo pẹ̀lú 200 jẹ́ ọ̀ràn tirẹ̀: ibi ìparí náà ṣiṣẹ́, kò ṣe nnkan kan, nnkan kan ní ìsàlẹ̀ sì kà á sí àṣeyọrí. Ìkùnà àdéhùn ètò ni èyí kì í ṣe ti gbígbé, ibi rẹ̀ sì wà ní ìgbésẹ̀ tí ó kàn, kì í ṣe nínú proxy. Firefox àti Safari ń sọ àwọn ìkùnà mẹ́rin kan náà ní ọ̀nà mìíràn, nítorí náà fi wé àmì náà tàbí ara òfo, kì í ṣe okùn gbá tirẹ̀.
Ìgbésẹ̀ 5: tún ẹ̀yà tí ẹ̀rí ń tọ́ka sí ṣe
Fún ìṣòro ìtọ́sọ́nà, tún ìbéèrè náà ṣe: tún action ṣe, dènà kí olùṣàkóso má ṣubú, mú ibi ìparí àti ọ̀nà báramu, kí o sì tún dánwò. Fún ìṣòro ìfihàn, tún ohun tí ó dá ara náà ṣe, kí o sì wá ìdí tí ìwé àṣìṣe fi ń padà wá níbi tí a ti retí dátà. Fún ìṣòro àdéhùn, ka ìṣètò tí ìkànnì ń retí gan-an fún ẹ̀yà tí o ń ṣiṣẹ́, kí o sì dá ìdáhùn náà ní ìbámu pẹ̀lú rẹ̀ dípò jíjẹ́ kí olùgbàá lọ̀.
Ìdáhùn tí a dílẹ̀ ìwọlé nílò ìyí tirẹ̀, nítorí ìbéèrè fúnra rẹ̀ lè tọ́, ara náà sì lè má dé kóòdù rẹ láé. Fi Access-Control-Allow-Origin ìdáhùn náà wé Origin gbá tirẹ̀ tí aṣàwákiri fi ránṣẹ́, kí o sì rántí pé àmì àṣeparí kò ní ìtẹ́lọ́rùn ìbéèrè tí ó ní ẹ̀rí. So credentials: 'include' ní ẹ̀gbẹ́ olùgbàá pọ̀ mọ́ Access-Control-Allow-Credentials: true ní ẹ̀gbẹ́ olùpín, kí o sì ṣàyẹ̀wò bóyá ìpè náà lo ipò no-cors, níbi tí ara tí kò mọ́lẹ̀ jẹ́ àbájáde tí a kọ sílẹ̀ kì í ṣe àbùkù.
Fífi atúpalẹ̀sọ̀rọ̀ rọ́pò pẹ̀lú nnkan tí ó fàyè gbà jẹ́ àtúnṣe kan ṣoṣo tí a gbọ́dọ̀ yẹ̀wọ̀. Ṣíṣe àgbéléwò ìdáhùn náà gẹ́gẹ́ bí kóòdù, tàbí yíyọ ọ̀rọ̀ kúrò títí tí yóò fi ṣe ìtúpalẹ̀, ń fi àìbáramu àdéhùn náà pamọ́, ó sì ń fi ojú abẹ́ ìtẹ̀wọ́ kún un ní pàṣípààrọ̀ fún ìdákẹ́jẹ́. Bákan náà, ṣíṣàyẹ̀wò ipò lọ́tọ̀ sí ara ṣe pàtàkì: 200 tí ó gbé nnkan àṣìṣe ní ìpele ètò jẹ́ ojú-ìwé deede nínú ọ̀pọ̀ API, a sì gbọ́dọ̀ ṣàkóso rẹ̀ nípa kíkà ẹrù náà.
Nígbà tí o bá nílò ìrànlọ́wọ́ ẹlòmíràn, pín àkọsílẹ̀ kéré jùlọ — ọ̀nà, URL, ipò, URL ìkẹyìn lẹ́yìn ìtúnjúwe, irú àkóónú ìdáhùn, ìrísí ara àti àdéhùn tí a retí — dípò ìjáde àìṣeéṣe. Àwọn àkójọpọ̀ nẹ́tíwọ́kì ní kúkì, tọ́kẹ̀nì, okùn ìbéèrè àti dátà ẹnìkan tí ó wà nínú fọọmu, ìwẹ̀nùmọ́ aṣẹ́ẹ̀ṣẹ̀ kì í sì ṣe àyẹ̀wò.
- Mú ìbéèrè náà láìsí àlẹ̀mọ́ kí o tó yí kóòdù kankan padà.
- Jẹ́rìí pé olùbẹ̀rẹ̀ ni script rẹ àti pé URL ìkẹyìn ni ibi ìparí rẹ.
- Pín ìdáhùn náà sí ẹ̀ka kí o tó fọwọ́ kàn atúpalẹ̀sọ̀rọ̀.
- Tún ìtọ́sọ́nà, ìwọlé, ìfihàn tàbí àdéhùn ṣe, kì í sì í ṣe nípa jíjẹ́ kí atúpalẹ̀sọ̀rọ̀ lọ̀.