ความแตกต่างระหว่าง $ .ajax () และ $ .get () และ $ .load ()


175

ความแตกต่างระหว่าง$.ajax()และ$.get()กับ$.load()คืออะไร?

ข้อไหนดีกว่าที่จะใช้และในเงื่อนไขใด?


มีความเป็นไปได้ที่ซ้ำกันของความแตกต่างระหว่าง $ ("# id"). load และ $ .ajax?
Athafoud

คำตอบ:


241

$.ajax()เป็นหนึ่งที่กำหนดค่าได้มากที่สุดที่คุณได้รับการควบคุมที่ละเอียดกว่าส่วนหัว HTTP และเช่น คุณยังสามารถเข้าถึง XHR- วัตถุโดยตรงโดยใช้วิธีนี้ นอกจากนี้ยังมีการจัดการข้อผิดพลาดที่ละเอียดยิ่งขึ้นเล็กน้อย อาจซับซ้อนและไม่จำเป็นบ่อยครั้ง แต่บางครั้งก็มีประโยชน์มาก คุณต้องจัดการกับข้อมูลที่ส่งคืนด้วยตัวคุณเองด้วยการติดต่อกลับ

$.get()เป็นเพียงการจดชวเลข$.ajax()แต่สรุปการกำหนดค่าบางอย่างออกไปตั้งค่าเริ่มต้นที่เหมาะสมสำหรับสิ่งที่ซ่อนจากคุณ ส่งคืนข้อมูลไปยังการเรียกกลับ อนุญาตเฉพาะการร้องขอ GET ดังนั้นจึงมาพร้อมกับ$.post()ฟังก์ชั่นสำหรับนามธรรมที่คล้ายกันเฉพาะสำหรับ POST

.load()คล้ายกับ$.get()แต่เพิ่มฟังก์ชันการทำงานซึ่งช่วยให้คุณสามารถกำหนดตำแหน่งที่จะแทรกข้อมูลที่ส่งคืนในเอกสาร ดังนั้นใช้งานได้จริงเมื่อการโทรเท่านั้นจะส่งผลให้ HTML มันถูกเรียกแตกต่างจากสายอื่น ๆ ทั่วโลกเล็กน้อยเนื่องจากเป็นวิธีการเชื่อมโยงกับองค์ประกอบ DOM ที่ห่อหุ้ม jQuery โดยเฉพาะ ดังนั้นหนึ่งจะทำ:$('#divWantingContent').load(...)

มันควรจะตั้งข้อสังเกตว่าทั้งหมด$.get(), $.post(), .load()มีทั้งหมดห่อเพียงสำหรับการ$.ajax()ที่มันเรียกว่าภายใน

รายละเอียดเพิ่มเติมในเอกสาร Ajax ของ jQuery: http://api.jquery.com/category/ajax/


3
@ UzairAli ไม่มันใช้ตัวแปรที่คุณส่งไปแล้วและใช้มันเพื่อประมวลผล jQuery.ajax ()
lisburnite

1
เยี่ยมยอด. load () เป็นเพียง HTML ธรรมดาและ. get () มีประโยชน์สำหรับสิ่งต่าง ๆ เพิ่มเติม
Luigi Lopez

30

วิธีการให้ชั้นต่าง ๆ ของสิ่งที่เป็นนามธรรม

  • $.ajax()ให้คุณควบคุมคำขอ Ajax ได้อย่างสมบูรณ์ คุณควรใช้มันหากวิธีอื่นไม่เต็มความต้องการของคุณ

  • $.get()ดำเนินการGETร้องขอAjax ข้อมูลที่ส่งคืน (ซึ่งสามารถเป็นข้อมูลใด ๆ ) จะถูกส่งผ่านไปยังตัวจัดการการโทรกลับของคุณ

  • $(selector).load()จะดำเนินการGETคำขอAjax และจะตั้งค่าเนื้อหาของข้อมูลที่ส่งคืนที่เลือก (ซึ่งควรเป็นข้อความหรือ HTML)

ขึ้นอยู่กับสถานการณ์ที่วิธีการที่คุณควรใช้ $.ajax()หากคุณต้องการที่จะทำสิ่งที่เรียบง่ายไม่มีความจำเป็นที่จะรำคาญกับ

เช่นคุณจะไม่ใช้$.load()หากข้อมูลที่ส่งคืนจะเป็น JSON ซึ่งจะต้องดำเนินการเพิ่มเติม ที่นี่คุณอาจจะใช้หรือ$.ajax()$.get()


9

http://api.jquery.com/jQuery.ajax/

jQuery.ajax()

คำอธิบาย: ดำเนินการตามคำขอ HTTP (Ajax) แบบอะซิงโครนัส

เงินทั้งหมดช่วยให้คุณสามารถร้องขอ Ajax ได้ทุกประเภท


http://api.jquery.com/jQuery.get/

jQuery.get()

คำอธิบาย: โหลดข้อมูลจากเซิร์ฟเวอร์โดยใช้คำขอ HTTP GET

ให้คุณส่งคำขอ HTTP GET เท่านั้นต้องการการกำหนดค่าน้อยกว่าเล็กน้อย


http://api.jquery.com/load/

.load()

คำอธิบาย: โหลดข้อมูลจากเซิร์ฟเวอร์และวาง HTML ที่ส่งคืนลงในองค์ประกอบที่ตรงกัน

มีความเชี่ยวชาญในการรับข้อมูลและฉีดเข้าไปในองค์ประกอบ


8

ธรรมดามาก แต่

  • $.load(): โหลดชิ้นส่วน html ลงใน DOM คอนเทนเนอร์
  • $.get(): ใช้สิ่งนี้หากคุณต้องการโทรออกGETและเล่นอย่างกว้างขวางด้วยการตอบสนอง
  • $.post(): ใช้สิ่งนี้หากคุณต้องการทำการโทรPOSTและไม่ต้องการโหลดการตอบกลับไปยัง DOM คอนเทนเนอร์บางตัว
  • $.ajax(): ใช้สิ่งนี้หากคุณต้องการทำอะไรบางอย่างเมื่อ XHR ล้มเหลวหรือคุณต้องระบุตัวเลือก ajax (เช่นแคช: จริง) ได้ทันที

5

หมายเหตุสำคัญ: jQuery.load () method สามารถไม่เพียง แต่ได้รับแต่ยังPOSTคำขอถ้าข้อมูลพารามิเตอร์จะมา (ดู: http://api.jquery.com/load/ )

ชนิดข้อมูล : PlainObject หรือ String วัตถุหรือสตริงธรรมดาที่ส่งไปยังเซิร์ฟเวอร์พร้อมคำขอ

วิธีการร้องขอวิธีการPOSTจะใช้หากมีการให้ข้อมูลเป็นวัตถุ มิฉะนั้นGETจะถือว่า

Example: pass arrays of data to the server (POST request)
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

3

ทุกคนมีสิทธิ ฟังก์ชั่น.load, .getและมีวิธีการที่แตกต่างกันของการใช้ฟังก์ชั่น.post.ajax

โดยส่วนตัวแล้วฉันพบว่าฟังก์ชั่น raw. jax ทำให้เกิดความสับสนและต้องการใช้โหลดรับหรือโพสต์ตามที่ฉันต้องการ

POST มีโครงสร้างดังต่อไปนี้:

$.post(target, post_data, function(response) { });

GET มีดังต่อไปนี้:

$.get(target, post_data, function(response) { });

โหลดมีดังต่อไปนี้:

$(*selector*).load(target, post_data, function(response) { });

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

สิ่งสำคัญคือ. load ทำหน้าที่ในมารยาทที่แตกต่างกันสองแบบ หากคุณให้เฉพาะ url ของเอกสารเป้าหมายมันจะทำหน้าที่เป็นตัวรับ (และฉันบอกว่าทำเพราะฉันทดสอบการตรวจสอบ$_POSTใน PHP ที่เรียกว่าในขณะที่ใช้พฤติกรรมการโหลดเริ่มต้นและตรวจพบ$_POSTไม่ใช่$_GETอาจจะแม่นยำกว่า บอกว่ามันทำหน้าที่เป็น. post โดยไม่มีข้อโต้แย้งใด ๆ ); อย่างไรก็ตามในฐานะhttp://api.jquery.com/load/กล่าวว่าเมื่อคุณให้อาเรย์ของอาร์กิวเมนต์แก่ฟังก์ชันแล้วจะโพสต์ข้อมูลไปยังไฟล์ ฟังก์ชั่น. load จะแทรกข้อมูลลงในองค์ประกอบ DOM โดยตรงซึ่งในกรณี MANY นั้นอ่านง่ายและตรงไปตรงมามาก แต่ก็ยังมีการติดต่อกลับหากคุณต้องการทำอะไรมากกว่านี้กับการตอบกลับ นอกจากนี้. load ช่วยให้คุณสามารถสกัดบล็อกโค้ดบางไฟล์จากไฟล์ทำให้คุณมีความเป็นไปได้ที่จะบันทึกแคตตาล็อกเช่นในไฟล์ html และดึงชิ้นส่วน (รายการ) ลงในองค์ประกอบ DOM โดยตรง


3
$.get = $.ajax({type: 'GET'});

$.load() เป็นฟังก์ชั่นตัวช่วยซึ่งสามารถเรียกใช้ได้เฉพาะกับองค์ประกอบเท่านั้น

$.ajax()ช่วยให้คุณควบคุมได้มากที่สุด คุณสามารถระบุว่าคุณต้องการที่จะโพสต์ข้อมูลรับโทรกลับมากขึ้น ฯลฯ


1

ทั้งสองใช้เพื่อส่งข้อมูลและรับการตอบกลับโดยใช้ข้อมูลนั้น

GET : รับข้อมูลที่เก็บไว้ในเซิร์ฟเวอร์ (เช่นการค้นหาทวีตข้อมูลบุคคล) หากคุณต้องการที่จะส่งข้อมูลจากนั้นรับคำขอส่งคำขอโดยใช้process.php?name=subrotoดังนั้นโดยทั่วไปจะส่งข้อมูลผ่าน URL URL ไม่สามารถจัดการได้มากกว่า 2036 ถ่าน ดังนั้นสำหรับการโพสต์บล็อกคุณสามารถจำได้หรือไม่?

โพสต์: โพสต์ทำสิ่งเดียวกันกับรับ การลงทะเบียนผู้ใช้, การเข้าสู่ระบบของผู้ใช้, การส่งข้อมูลขนาดใหญ่, โพสต์บล็อก หากคุณต้องการส่งข้อมูลที่ปลอดภัยให้ใช้การโพสต์หรือข้อมูลขนาดใหญ่เนื่องจากไม่ผ่าน url

AJAX : $.get()และมีคุณลักษณะที่มีส่วนย่อยของ$.post() $.ajax()มันมีการกำหนดค่าเพิ่มเติม

$.get ()$.ajax()วิธีการซึ่งเป็นชนิดของชวเลขเป็น เมื่อใช้$.get ()แทนที่จะส่งผ่านวัตถุคุณจะผ่านการขัดแย้ง อย่างน้อยที่สุดคุณจะต้องมีอาร์กิวเมนต์สองข้อแรกซึ่งก็คือ URL ของไฟล์ที่คุณต้องการดึงข้อมูล (เช่นtest.txt)และการเรียกกลับสำเร็จ


0

ทุกคนอธิบายหัวข้อได้ดีมาก มีอีกหนึ่งจุดที่ฉันต้องการเพิ่มเกี่ยวกับ. load () วิธี

ตามโหลดเอกสาร หากคุณเพิ่มตัวเลือกคำต่อท้ายใน URL ข้อมูลจากนั้นจะไม่เรียกใช้งานสคริปต์ในการโหลดเนื้อหา

พลั่วทำงาน

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html #content");
            })

ในทางกลับกันหลังจากลบตัวเลือกใน url สคริปต์ในเนื้อหาใหม่จะทำงาน ลองตัวอย่างนี้

หลังจากลบ #content ใน url ในไฟล์ index.html

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html");
            })

ไม่มีคุณสมบัติที่สร้างขึ้นโดยวิธีอื่นในการอภิปราย

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