จะส่งผ่านพารามิเตอร์ใน $ ajax POST ได้อย่างไร?

ฉันได้ปฏิบัติตามกวดวิชาตามที่ระบุไว้ในนี้การเชื่อมโยง ในโค้ดด้านล่างด้วยเหตุผลบางประการข้อมูลไม่ได้ต่อท้าย url เป็นพารามิเตอร์ แต่ถ้าฉันตั้งค่าโดยตรงเป็น url โดยใช้/?field1="hello"งานได้

$.ajax({
        url: 'superman',
        type: 'POST',
        data: { field1: "hello", field2 : "hello2"} ,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            alert(response.status);
        },
        error: function () {
            alert("error");
        }
    }); 

ฉันอยากจะแนะนำให้คุณใช้$.postหรือ$.getไวยากรณ์ของ jQuery สำหรับกรณีง่ายๆ:

$.post('superman', { field1: "hello", field2 : "hello2"}, 
    function(returnedData){
         console.log(returnedData);
});

หากคุณต้องการจับกรณีที่ล้มเหลวให้ทำดังนี้:

$.post('superman', { field1: "hello", field2 : "hello2"}, 
    function(returnedData){
         console.log(returnedData);
}).fail(function(){
      console.log("error");
});

นอกจากนี้หากคุณส่งสตริง JSON เสมอคุณสามารถใช้$ .getJSONหรือ $ .postพร้อมพารามิเตอร์อีกหนึ่งตัวที่ท้ายสุด

$.post('superman', { field1: "hello", field2 : "hello2"}, 
     function(returnedData){
        console.log(returnedData);
}, 'json');

ลองใช้วิธี GET

var request = $.ajax({
    url: 'url',
    type: 'GET',
    data: { field1: "hello", field2 : "hello2"} ,
    contentType: 'application/json; charset=utf-8'
});

request.done(function(data) {
      // your success code here
});

request.fail(function(jqXHR, textStatus) {
      // your failure code here
});

คุณไม่สามารถดูพารามิเตอร์ใน URL ด้วยเมธอด POST

แก้ไข:

ประกาศการเลิกใช้งาน:การเรียกกลับ jqXHR.success (), jqXHR.error () และ jqXHR.complete () จะถูกลบออกเมื่อ jQuery 3.0 คุณสามารถใช้ jqXHR.done (), jqXHR.fail () และ jqXHR.always () แทนได้

Jquery.ajaxไม่ได้เข้ารหัสข้อมูล POST ให้คุณโดยอัตโนมัติแบบเดียวกับที่ทำกับ GET data Jquery คาดว่าข้อมูลของคุณจะถูกจัดรูปแบบไว้ล่วงหน้าเพื่อผนวกเข้ากับเนื้อหาของคำขอที่จะส่งผ่านสายโดยตรง

วิธีแก้ปัญหาคือการใช้ฟังก์ชันjQuery.paramเพื่อสร้างสตริงแบบสอบถามที่สคริปต์ส่วนใหญ่ที่ประมวลผลคำขอ POST คาดหวัง

$.ajax({
    url: 'superman',
    type: 'POST',
    data: jQuery.param({ field1: "hello", field2 : "hello2"}) ,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function (response) {
        alert(response.status);
    },
    error: function () {
        alert("error");
    }
}); 

ในกรณีนี้paramวิธีการจัดรูปแบบข้อมูลเป็น:

field1=hello&field2=hello2

Jquery.ajaxเอกสารบอกว่ามีธงที่เรียกprocessDataว่าการควบคุมไม่ว่าจะเข้ารหัสนี้จะทำโดยอัตโนมัติหรือไม่ เอกสารระบุว่าเป็นค่าเริ่มต้นtrueแต่นั่นไม่ใช่พฤติกรรมที่ฉันสังเกตเห็นเมื่อPOSTมีการใช้งาน

    function FillData() {
    var param = $("#<%= TextBox1.ClientID %>").val();
    $("#tbDetails").append("<img src='Images/loading.gif'/>");
    $.ajax({
        type: "POST",/*method type*/
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/BindDatatable",/*Target function that will be return result*/
        data: '{"data":"' + param + '"}',/*parameter pass data is parameter name param is value */
        dataType: "json",
        success: function(data) {
               alert("Success");
            }
        },
        error: function(result) {
            alert("Error");
        }
    });   
}

ในคำขอ POSTพารามิเตอร์จะถูกส่งไปในเนื้อหาของคำขอนั่นคือเหตุผลที่คุณไม่เห็นพารามิเตอร์เหล่านี้ใน URL

หากต้องการดูให้เปลี่ยน

    type: 'POST',

ถึง

    type: 'GET',

โปรดทราบว่าเบราว์เซอร์มีเครื่องมือในการพัฒนาซึ่งช่วยให้คุณเห็นคำขอทั้งหมดที่มีปัญหากับโค้ด ใน Chrome จะอยู่ในแผง "เครือข่าย"

$.ajax(
   {
      type: 'post',
      url: 'superman',
      data: { 
        "field1": "hello",
        "field2": "hello1"
      },
      success: function (response) {
        alert("Success !!");
      },
      error: function () {
        alert("Error !!");
      }
   }
);

type: 'POST'จะผนวกพารามิเตอร์ **ให้กับร่างกายของคำขอ ** ซึ่งเป็นไม่ได้เห็นในURLในขณะที่ type: 'GET'ให้เพิ่มพารามิเตอร์ไปยัง URL ซึ่งเป็นที่มองเห็นได้

เว็บเบราว์เซอร์ยอดนิยมส่วนใหญ่มีแผงเครือข่ายที่แสดงคำขอทั้งหมด

ในแผงเครือข่ายเลือกXHRเพื่อดูการร้องขอ

ซึ่งสามารถทำได้ผ่านทางนี้

$.post('superman',
      { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      function (response) {
        alert("Success !");
      }
    );

คุณสามารถทำได้โดยใช้ $ .ajax หรือ $ .post

ใช้ $ .ajax:

    $.ajax({
      type: 'post',
      url: 'superman',
      data: { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      success: function (response) {
        alert(response.status);
      },
      error: function () {
        alert("error");
      }
   });

ใช้ $ .post:

    $.post('superman',
      { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      function (response, status) {
        alert(response.status);
      }
    );

รหัสของคุณถูกต้องยกเว้นว่าคุณไม่ได้ส่งคีย์ JSON เป็นสตริง

ควรมีเครื่องหมายคำพูดคู่หรือเดี่ยวอยู่รอบ ๆ

{"field1": "สวัสดี", "field2": "hello2"}

$.ajax(
   {
      type: 'post',
      url: 'superman',
      data: { 
        "field1": "hello", // Quotes were missing
        "field2": "hello1" // Here also
      },
      success: function (response) {
        alert(response);
      },
      error: function () {
        alert("error");
      }
   }
);

สำหรับส่งพารามิเตอร์ใน url ในPOSTmethod คุณสามารถต่อท้าย url ได้ดังนี้:

$.ajax({
    type: 'POST',
    url: 'superman?' + jQuery.param({ f1: "hello1", f2 : "hello2"}),
    // ...
});