ส่งผ่านพารามิเตอร์หลายตัวเพื่อเรียก jQuery ajax


99

ฉันมีรหัส jquery ต่อไปนี้เพื่อเรียกใช้ webmethod ในหน้า aspx

$.ajax({
    type: "POST",
    url: "popup.aspx/GetJewellerAssets",
    contentType: "application/json; charset=utf-8",
    data: '{"jewellerId":' + filter + '}',
    dataType: "json",
    success: AjaxSucceeded,
    error: AjaxFailed
});

และนี่คือลายเซ็นวิธีการเว็บ

[WebMethod]
public static string GetJewellerAssets(int jewellerId)
{

ใช้งานได้ดี

แต่ตอนนี้ฉันต้องส่งพารามิเตอร์สองตัวไปยังวิธีการเว็บ

วิธีการเว็บใหม่มีลักษณะดังนี้

[WebMethod]
public static string GetJewellerAssets(int jewellerId, string locale)
{
}

ฉันจะเปลี่ยนรหัสไคลเอนต์เพื่อเรียกลายเซ็นวิธีใหม่นี้ได้สำเร็จได้อย่างไร

แก้ไข:

2 ไวยากรณ์ต่อไปนี้ใช้งานได้

data: '{ "jewellerId":' + filter + ', "locale":"en" }',

และ

data: JSON.stringify({ jewellerId: filter, locale: locale }),

โดยที่ตัวกรองและโลแคลเป็นตัวแปรท้องถิ่น


9
data: JSON.stringify({ jewellerId: filter, locale: locale })เป็นวิธีที่ดีที่สุดที่ฉันทุกคนพบขอบคุณ @ChrisCa
Frank Myat พฤหัสบดี

หากคุณเป็นคนที่เศร้าหมองเหมือนฉันคุณอาจติดอยู่กับเรื่องนี้เป็นเวลาหลายชั่วโมง เมื่อใช้JSON.stringifyกับอ็อบเจกต์ลิเทอรัลคุณต้องใส่ชื่อพารามิเตอร์ที่มีโคลอนซึ่งทั้งหมดอยู่ใน{}วงเล็บปีกกา ใช้JSON.stringify(objectLiteral)ไม่ได้ผล
Kaleb Anderson

ลายเซ็นวิธีเช่น [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)?
Kiquenet

คำตอบ:


141

อย่าใช้การต่อสตริงเพื่อส่งผ่านพารามิเตอร์เพียงแค่ใช้แฮชข้อมูล:

$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',
    contentType: 'application/json; charset=utf-8',
    data: { jewellerId: filter, locale: 'en-US' },
    dataType: 'json',
    success: AjaxSucceeded,
    error: AjaxFailed
});

อัพเดท:

ตามที่ @Alex แนะนำในส่วนความคิดเห็น ASP.NET PageMethod คาดว่าพารามิเตอร์จะเข้ารหัส JSON ในคำขอดังนั้นJSON.stringifyควรใช้กับแฮชข้อมูล:

$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ jewellerId: filter, locale: 'en-US' }),
    dataType: 'json',
    success: AjaxSucceeded,
    error: AjaxFailed
});

12
ลองใช้JSON.stringify( myObject )เพื่อสร้างสตริง JSON จากวัตถุจาวาสคริปต์ในกรณีที่คุณต้องการจัดกลุ่มพารามิเตอร์ของคุณเป็นคลาสในภายหลัง
Alex Bagnolini

1
ขอบคุณสำหรับการตอบกลับ - อย่างไรก็ตามฉันได้รับสถานะ http 500 เมื่อฉันลองแบบนั้น ความคิดใด ๆ ? หรือแม้กระทั่งวิธีการดีบัก? เบรกพอยต์ในวิธีเว็บไม่เคยโดน
ChrisCa

1
โค้ดใหม่ดังนี้ $ .ajax ({type: 'POST', url: 'popup.aspx / GetJewellerAssets', contentType: 'application / json; charset = utf-8', data: {jewellerId: filter, locale: 'th -US '}, dataType: "json", สำเร็จ: AjaxSucceeded, error: AjaxFailed});
ChrisCa

1
ในการดีบักอันดับแรกให้ดูที่ FireBug การตอบสนองที่แน่นอนของเซิร์ฟเวอร์คืออะไรจากนั้นใส่จุดพักในวิธีการบริการเว็บและดูว่าถึงหรือไม่
Darin Dimitrov

1
เบรกพอยต์ในวิธีการเว็บไม่เคยโดน Firebug แสดง: "ข้อความ": "ดั้งเดิม JSON ไม่ถูกต้อง: jewellerId.", "StackTrace": "ที่ System.Web.Script.Serialization ดังนั้นฉันเดาว่าไวยากรณ์ของ json ไม่ถูกต้อง
ChrisCa

18
data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',

1
สิ่งนี้ได้ผล: '{"jewellerId":' + filter + ', "locale": "en"}', (เห็นได้ชัดว่าฉันจะไม่
ฮาร์ดโค้ด

สิ่งนี้ใช้ได้ผลกับฉันกับ MVC 3 ฉันไม่สามารถหาวิธีทำงานของ Darin ได้ - อาจจะเป็น MVC 3 ก็ได้
คำสั่ง

7

เพียงเพิ่มคุณสมบัติให้มากที่สุดเท่าที่คุณต้องการในออบเจ็กต์ข้อมูล

 $.ajax({
                    type: "POST",
                    url: "popup.aspx/GetJewellerAssets",
                    contentType: "application/json; charset=utf-8",
                    data: {jewellerId: filter , foo: "bar", other: "otherValue"},
                    dataType: "json",
                    success: AjaxSucceeded,
                    error: AjaxFailed
                });

1
ลายเซ็น webmethod จะเป็นอย่างไรในกรณีนี้เพื่ออ่านคุณสมบัติในdataฝั่งเซิร์ฟเวอร์
Flo

5

อย่าใช้วิธีการด้านล่างในการส่งข้อมูลโดยใช้ ajax call

data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}'

หากผู้ใช้ป้อนอักขระพิเศษโดยไม่ได้ตั้งใจเช่น single quote หรือ double quote การโทร ajax ล้มเหลวเนื่องจากสตริงผิด

ใช้วิธีการด้านล่างเพื่อเรียกใช้บริการเว็บโดยไม่มีปัญหาใด ๆ

var parameter = {
       jewellerId: filter,
       locale : locale 
};


data: JSON.stringify(parameter)

ในพารามิเตอร์ด้านบนคือชื่อของวัตถุ javascript และกำหนดให้เป็นสตริงเมื่อส่งไปยังแอตทริบิวต์ข้อมูลของการเรียก ajax


3

มีใครสังเกตเห็นว่าสตริง / วัตถุ json ไม่ถูกต้องในทุกคำตอบยกเว้นของ David Hedlund :)

ต้องจัดรูปแบบออบเจ็กต์ JSON ในลักษณะต่อไปนี้: {"key": ("value" | 0 | false)} นอกจากนี้การเขียนออกมาเป็นสตริงนั้นต้องใช้น้อยกว่าการร้อยวัตถุ ...


3
$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',      
    data: "jewellerId=" + filter+ "&locale=" +  locale,  
    success: AjaxSucceeded,
    error: AjaxFailed
});

ทำงานเกินไปโดยใช้ประเภท: GET ?
Kiquenet

หรือคุณสามารถใช้อาร์เรย์เพื่อส่งผ่านข้อมูลใน jason.stringyfy (array)
Shekhar Patel

1

เพียงเพิ่มใน [บรรทัดนี้ทำงานได้อย่างสมบูรณ์แบบใน Asp.net และค้นหาฟิลด์การควบคุมเว็บใน jason เช่น: <% Fieldname%>]

 data: "{LocationName:'" + document.getElementById('<%=txtLocationName.ClientID%>').value + "',AreaID:'" + document.getElementById('<%=DropDownArea.ClientID%>').value + "'}",

1
    var valueOfTextBox=$("#result").val();
    var valueOfSelectedCheckbox=$("#radio:checked").val();

    $.ajax({
    url: 'result.php',
    type: 'POST',
    data: { forValue: valueOfTextBox, check : valueOfSelectedCheckbox } ,
    beforeSend: function() {

          $("#loader").show();
       },
    success: function (response) {
       $("#loader").hide();
       $("#answer").text(response);
    },
    error: function () {
        //$("#loader").show();
        alert("error occured");
    }
    }); 

0

ทุกอย่างเกี่ยวกับข้อมูลที่คุณส่งผ่าน ต้องมีการจัดรูปแบบสตริงอย่างถูกต้อง หากคุณกำลังส่งผ่านข้อมูลว่างข้อมูล: {} จะทำงาน อย่างไรก็ตามด้วยพารามิเตอร์หลายตัวจะต้องมีรูปแบบที่เหมาะสมเช่น

var dataParam = '{' + '"data1Variable": "' + data1Value+ '", "data2Variable": "' + data2Value+ '"' +  '}';

....

ข้อมูล: dataParam

...

วิธีที่ดีที่สุดในการทำความเข้าใจคือมีตัวจัดการข้อผิดพลาดพร้อมพารามิเตอร์ข้อความที่เหมาะสมเพื่อให้ทราบข้อผิดพลาดโดยละเอียด


0

ฉันส่งผ่านพารามิเตอร์หลายตัวโดยใช้ json ได้สำเร็จ

data: "{'RecomendeeName':'" + document.getElementById('txtSearch').value + "'," + "'tempdata':'" +"myvalue" + "'}",

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