$ .ajax - dataType


137

อะไรคือความแตกต่างระหว่าง

contentType: "application/json; charset=utf-8",
dataType: "json",

เทียบกับ

contentType: "application/json",
dataType: "text",

คำตอบ:


183
  • contentTypeคือส่วนหัว HTTP ที่ส่งไปยังเซิร์ฟเวอร์โดยระบุรูปแบบเฉพาะ
    ตัวอย่าง: ฉันกำลังส่ง JSON หรือ XML
  • dataTypeคุณกำลังบอก jQuery ว่าจะตอบสนองแบบไหน
    คาดหวังว่าจะเป็น JSON หรือ XML หรือ HTML เป็นต้นค่าดีฟอลต์คือให้ jQuery ลองคิดออก

$.ajax()เอกสารมีรายละเอียดเต็มรูปแบบของเหล่านี้เช่นกัน


โดยเฉพาะในกรณีของคุณเป็นครั้งแรกที่จะขอสำหรับการตอบสนองที่จะอยู่ในUTF-8ที่สองไม่ได้ดูแล สิ่งแรกคือการปฏิบัติต่อการตอบสนองเป็นวัตถุ JavaScript อย่างที่สองจะถือว่าเป็นสตริง

สิ่งแรกคือ:

success: function(data) {
  // get data, e.g. data.title;
}

ที่สอง:

success: function(data) {
  alert("Here's lots of data, just a string: " + data);
}

1
วิธีใดเป็นวิธีที่ต้องการมากกว่าหรือแนะนำมากที่สุด
Nick Kahn

1
@Adu - ไม่มีคำตอบโดยตรงสำหรับสิ่งนั้นขึ้นอยู่กับว่าคุณต้องการทำอะไรกับผลลัพธ์ ... พวกเขากำลังทำ 2 สิ่งที่แตกต่างกัน ตามหลักการแล้วเว้นแต่จะเป็นผลลัพธ์ที่ง่ายมากคุณอาจต้องการจัดการกับ JSON ซึ่งในกรณีนี้อันแรกจะง่ายกว่า
Nick Craver

2
Musa ถูกต้อง contentType ระบุรูปแบบที่เรากำลังส่งไปยังเซิร์ฟเวอร์ (เช่น post body) ไม่ใช่สิ่งที่ร้องขอกลับ
antinome

@antinome เหล่านั้นมักจะเข้าร่วมกันมากมันมีความสำคัญที่นี่ใน Stack Overflow ในหลาย ๆ ที่เช่น พูดอย่างเคร่งครัดว่าพวกเขาเป็นอิสระฉันได้อัปเดตเพื่อให้สอดคล้องกับสิ่งนั้น
Nick Craver

ยังไม่มีสถานที่ที่ฉันสามารถค้นหาสิ่งที่เป็นค่าเริ่มต้นฉันหมายถึงฉันกำลังดำเนินการด้วยตนเองและสร้างวัตถุขึ้นใหม่หลังจากการโทรแต่ละครั้ง แต่ในการรีเซ็ตฉันมีปัญหา หากฉันตั้งค่าเป็น 'json' เป็นค่าเริ่มต้นจะไม่เสริมการคาดเดาอัจฉริยะ แต่จะใช้งานได้ในระดับหนึ่งจนกว่าจะได้รับการเรียกที่ฉันไม่ได้ระบุไว้ (นั่นไม่ใช่การเรียก JSON เอง) ถ้าฉันตั้งค่าเป็นสตริงว่างหรือว่างดูเหมือนว่าจะทำลายทุกอย่าง ฉันสามารถตั้งค่าเป็น 'default' หรือ f'in 'Intellgent Guess' เพื่อประโยชน์ของ f ได้หรือไม่? สิ่งที่เป็นเทคนิคเริ่มต้นคือเป็นกำหนดระหว่างสองคำพูดdataType = ""?
ตำหนิ

51

(ps: คำตอบที่ Nick Craver ให้ไว้ไม่ถูกต้อง)

contentType ระบุรูปแบบของข้อมูลที่ส่งไปยังเซิร์ฟเวอร์เป็นส่วนหนึ่งของคำขอ (สามารถส่งเป็นส่วนหนึ่งของการตอบกลับได้เช่นกันและเพิ่มเติมในภายหลัง)

dataType ระบุรูปแบบข้อมูลที่คาดว่าจะได้รับจากไคลเอนต์ (เบราว์เซอร์)

ทั้งสองไม่สามารถแลกเปลี่ยนกันได้

  • contentTypeคือส่วนหัวที่ส่งไปยังเซิร์ฟเวอร์โดยระบุรูปแบบของข้อมูล (เช่นเนื้อหาของเนื้อหาข้อความ) ที่ส่งไปยังเซิร์ฟเวอร์ ใช้กับคำขอ POST และ PUT โดยปกติเมื่อคุณส่งคำขอ POST เนื้อหาของข้อความจะประกอบด้วยพารามิเตอร์ที่ส่งผ่านเช่น:

==============================

คำขอตัวอย่าง:

POST /search HTTP/1.1 
Content-Type: application/x-www-form-urlencoded 
<<other header>>

name=sam&age=35

==============================

บรรทัดสุดท้ายด้านบน "name = sam & age = 35" คือเนื้อหาข้อความและ contentType ระบุว่าเป็น application / x-www-form-urlencoded เนื่องจากเรากำลังส่งพารามิเตอร์ฟอร์มในเนื้อหาข้อความ อย่างไรก็ตามเราไม่ได้ จำกัด แค่การส่งพารามิเตอร์เราสามารถส่ง json, xml, ... แบบนี้ได้ (การส่งข้อมูลประเภทต่างๆมีประโยชน์อย่างยิ่งกับบริการเว็บ RESTful):

==============================

คำขอตัวอย่าง:

POST /orders HTTP/1.1
Content-Type: application/xml
<<other header>>

<order>
   <total>$199.02</total>
   <date>December 22, 2008 06:56</date>
...
</order>

==============================

ดังนั้น ContentType ในครั้งนี้คือ application / xml เพราะนั่นคือสิ่งที่เรากำลังส่ง ตัวอย่างข้างต้นแสดงคำขอตัวอย่างในทำนองเดียวกันการตอบกลับที่ส่งจากเซิร์ฟเวอร์ยังสามารถมีส่วนหัว Content-Type ที่ระบุสิ่งที่เซิร์ฟเวอร์กำลังส่งเช่นนี้:

==============================

การตอบสนองตัวอย่าง:

HTTP/1.1 201 Created
Content-Type: application/xml
<<other headers>>

<order id="233">
   <link rel="self" href="http://example.com/orders/133"/>
   <total>$199.02</total>
   <date>December 22, 2008 06:56</date>
...
</order>

==============================

  • dataTypeระบุรูปแบบของการตอบสนองที่คาดหวัง เกี่ยวข้องกับส่วนหัวยอมรับ JQuery จะพยายามสรุปตามประเภทเนื้อหาของการตอบสนอง

==============================

คำขอตัวอย่าง:

GET /someFolder/index.html HTTP/1.1
Host: mysite.org
Accept: application/xml
<<other headers>>

==============================

คำขอข้างต้นต้องการ XML จากเซิร์ฟเวอร์

เกี่ยวกับคำถามของคุณ

contentType: "application/json; charset=utf-8",
dataType: "json",

ที่นี่คุณกำลังส่งข้อมูล json โดยใช้ชุดอักขระ UTF8 และคุณคาดหวังข้อมูล json กลับจากเซิร์ฟเวอร์ ตามเอกสาร JQuery สำหรับ dataType

ประเภท json จะแยกวิเคราะห์ไฟล์ข้อมูลที่ดึงมาเป็นอ็อบเจ็กต์ JavaScript และส่งคืนอ็อบเจ็กต์ที่สร้างขึ้นเป็นข้อมูลผลลัพธ์

ดังนั้นสิ่งที่คุณจะได้รับในตัวจัดการความสำเร็จคือวัตถุจาวาสคริปต์ที่เหมาะสม (JQuery แปลงวัตถุ json ให้คุณ)

ในขณะที่

contentType: "application/json",
dataType: "text",

ที่นี่คุณกำลังส่งข้อมูล json เนื่องจากคุณไม่ได้กล่าวถึงการเข้ารหัสตามเอกสาร JQuery

หากไม่ได้ระบุชุดอักขระข้อมูลจะถูกส่งไปยังเซิร์ฟเวอร์โดยใช้ชุดอักขระเริ่มต้นของเซิร์ฟเวอร์ คุณต้องถอดรหัสสิ่งนี้อย่างเหมาะสมทางฝั่งเซิร์ฟเวอร์

และเนื่องจาก dataType ถูกระบุเป็นข้อความสิ่งที่คุณจะได้รับในตัวจัดการความสำเร็จคือข้อความธรรมดาตามเอกสารสำหรับ dataType

ประเภทข้อความและ xml ส่งคืนข้อมูลโดยไม่มีการประมวลผล ข้อมูลจะถูกส่งต่อไปยังตัวจัดการความสำเร็จ


7

ตามเอกสาร :

  • "json": ประเมินการตอบสนองเป็น JSON และส่งคืนอ็อบเจ็กต์ JavaScript ใน jQuery 1.4 ข้อมูล JSON จะถูกแยกวิเคราะห์อย่างเข้มงวด JSON ที่มีรูปแบบไม่ถูกต้องจะถูกปฏิเสธและเกิดข้อผิดพลาดในการแยกวิเคราะห์ (ดู json.org สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบ JSON ที่เหมาะสม)
  • "text": สตริงข้อความธรรมดา

2

jQuery Ajax loader ทำงานได้ไม่ดีเมื่อคุณเรียกใช้ API สองรายการพร้อมกัน ในการแก้ไขปัญหานี้คุณต้องเรียก API ทีละรายการโดยใช้isAsyncคุณสมบัติในการตั้งค่า Ajax คุณต้องตรวจสอบให้แน่ใจว่าไม่มีข้อผิดพลาดใด ๆ ในการตั้งค่า มิฉะนั้นตัวโหลดจะไม่ทำงาน เช่นชนิดเนื้อหาที่ไม่ได้กำหนดชนิดข้อมูลสำหรับการโทร POST / PUT / DELETE / GET


หากคุณให้คำอธิบายที่ดีกว่านี้เป็นคำตอบที่ดี ... โปรดใส่ข้อมูลเพิ่มเติมในโพสต์นี้
วาววา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.