วิธีการโพสต์ JQuery Ajax

ส่งคำขอ http POST แบบอะซิงโครนัสเพื่อโหลดข้อมูลจากเซิร์ฟเวอร์ รูปแบบทั่วไปคือ:

jQuery.post( url [, data ] [, success ] [, dataType ] )
  • url: เป็นพารามิเตอร์บังคับเท่านั้น สตริงนี้ประกอบด้วยที่อยู่ที่จะส่งคำขอ ข้อมูลที่ส่งคืนจะถูกละเว้นหากไม่มีการระบุพารามิเตอร์อื่น
  • ข้อมูล: วัตถุธรรมดาหรือสตริงที่ส่งไปยังเซิร์ฟเวอร์พร้อมกับคำขอ
  • ความสำเร็จ: ฟังก์ชันเรียกกลับที่ดำเนินการหากการร้องขอสำเร็จมันใช้เป็นอาร์กิวเมนต์ที่ส่งคืนข้อมูล นอกจากนี้ยังส่งผ่านสถานะข้อความของการตอบกลับ
  • dataType: ประเภทของข้อมูลที่คาดหวังจากเซิร์ฟเวอร์ ค่าเริ่มต้นคือ Intelligent Guess (xml, json, script, text, html) หากมีการระบุพารามิเตอร์นี้จะต้องมีการเรียกกลับสำเร็จด้วย

ตัวอย่าง

$.post('//example.com/form.php', {category:'client', type:'premium'});

ร้องขอform.phpจากเซิร์ฟเวอร์ส่งข้อมูลเพิ่มเติมและละเว้นผลลัพธ์ที่ส่งคืน

$.post('//example.com/form.php', {category:'client', type:'premium'}, function(response){ alert("success"); $("#mypar").html(response.amount); });

คำขอform.phpจากเซิร์ฟเวอร์ส่งข้อมูลเพิ่มเติมและจัดการการตอบกลับที่ส่งคืน (รูปแบบ json) ตัวอย่างนี้สามารถเขียนในรูปแบบนี้:

$.post('//example.com/form.php', {category:'client', type:'premium'}).done(function(response){ alert("success"); $("#mypar").html(response.amount); });

ตัวอย่างต่อไปนี้โพสต์แบบฟอร์มโดยใช้ Ajax และใส่ผลลัพธ์ใน div

    jQuery.post demo // Attach a submit handler to the form $( "#searchForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), term = $form.find( "input[name='s']" ).val(), url = $form.attr( "action" ); // Send the data using post var posting = $.post( url, { s: term } ); // Put the results in a div posting.done(function( data ) { var content = $( data ).find( "#content" ); $( "#result" ).empty().append( content ); }); });   

ตัวอย่างต่อไปนี้ใช้ github api เพื่อดึงรายการที่เก็บของผู้ใช้โดยใช้ jQuery.ajax () และใส่ผลลัพธ์ใน div

    jQuery Get demo // Attach a submit handler to the form $( "#userForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), username = $form.find( "input[name='username']" ).val(), url = "//api.github.com/users/"+username+"/repos"; // Send the data using post var posting = $.post( url, { s: term } ); //Ajax Function to send a get request $.ajax({ type: "GET", url: url, dataType:"jsonp" success: function(response){ //if request if made successfully then the response represent the data $( "#result" ).empty().append( response ); } }); });   

jQuery.ajax ()

$.post( url [, data ] [, success ] [, dataType ] ) เป็นฟังก์ชัน Ajax ชวเลขเทียบเท่ากับ:

$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

$.ajax() มีทางเลือกเพิ่มเติมที่สามารถพบได้ที่นี่

ข้อมูลมากกว่านี้:

สำหรับข้อมูลเพิ่มเติมกรุณาเยี่ยมชมเว็บไซต์อย่างเป็นทางการ