วิธีการส่งผ่านพารามิเตอร์ในคำขอ GET ด้วย jQuery


252

ฉันจะส่งค่าสตริงข้อความค้นหาในคำขอ jQuery Ajax ได้อย่างไร ขณะนี้ฉันทำดังต่อไปนี้ แต่ฉันแน่ใจว่ามีวิธีที่สะอาดกว่าซึ่งไม่ต้องการให้ฉันเข้ารหัสด้วยตนเอง

$.ajax({
    url: "ajax.aspx?ajaxid=4&UserID=" + UserID + "&EmailAddress=" + encodeURIComponent(EmailAddress),
    success: function(response) {
        //Do Something
    },
    error: function(xhr) {
        //Do Something to handle error
    }
});

ผมเคยเห็นตัวอย่างที่พารามิเตอร์สตริงแบบสอบถามจะถูกส่งผ่านเป็นอาร์เรย์ แต่ตัวอย่างเหล่านี้ที่ผมเคยเห็นไม่ได้ใช้รูปแบบแทนพวกเขาตรงไปที่$.ajax() $.get()ตัวอย่างเช่น:

$.get("ajax.aspx", { UserID: UserID , EmailAddress: EmailAddress } );

ฉันชอบที่จะใช้รูปแบบ $ .ajax () เนื่องจากเป็นสิ่งที่ฉันคุ้นเคย (โดยเฉพาะอย่างยิ่งไม่มีเหตุผล - เป็นความชอบส่วนตัว)

แก้ไข 09/04/2556:

หลังจากคำถามของฉันถูกปิด (เป็น "Too Localized") ฉันพบคำถาม (เหมือนกัน) ที่เกี่ยวข้อง - โดยมี 3 upvotes ไม่น้อย (ฉันไม่ดีที่ไม่พบในตอนแรก):

การใช้ jQuery เพื่อสร้าง POST จะต้องจัดหาพารามิเตอร์ 'data' ให้ถูกวิธีอย่างไร

สิ่งนี้ตอบคำถามของฉันอย่างสมบูรณ์แบบฉันพบว่าการทำเช่นนี้ง่ายกว่ามากในการอ่าน & ฉันไม่จำเป็นต้องใช้ด้วยตนเองencodeURIComponent()ใน URL หรือค่า DATA (ซึ่งเป็นสิ่งที่ฉันพบว่าไม่ชัดเจนในคำตอบของ bipen) นี่เป็นเพราะdataค่าถูกเข้ารหัสโดยอัตโนมัติผ่าน$.param()) ในกรณีที่คนอื่น ๆ สามารถใช้งานได้นี่คือตัวอย่างที่ฉันได้ใช้:

$.ajax({
    url: "ajax.aspx?ajaxid=4",
    data: { 
        "VarA": VarA, 
        "VarB": VarB, 
        "VarC": VarC
    },
    cache: false,
    type: "POST",
    success: function(response) {

    },
    error: function(xhr) {

    }
});

$ .get เป็นเพียงทางลัดสำหรับ $ .ajax
Denys Séguret

ยกเว้นว่าคุณแก้ไข 09/04/2556 เป็นคำขอโพสต์ :-) แต่เห็นได้ชัดว่าทำงานได้เหมือนกับ GET
commonpike

คำตอบ:


308

ใช้ตัวเลือกข้อมูลของ ajax คุณสามารถส่งวัตถุข้อมูลไปยังเซิร์ฟเวอร์โดยdataตัวเลือกใน Ajax และสิ่งtypeที่กำหนดว่าคุณจะส่งมันอย่างไร (อย่างใดอย่างหนึ่งPOSTหรือGET) ประเภทเริ่มต้นคือGETวิธีการ

ลองสิ่งนี้

$.ajax({
  url: "ajax.aspx",
  type: "get", //send it through get method
  data: { 
    ajaxid: 4, 
    UserID: UserID, 
    EmailAddress: EmailAddress
  },
  success: function(response) {
    //Do Something
  },
  error: function(xhr) {
    //Do Something to handle error
  }
});

และคุณสามารถรับข้อมูลได้ด้วย (ถ้าคุณใช้ PHP)

 $_GET['ajaxid'] //gives 4
 $_GET['UserID'] //gives you the sent userid

ใน aspx ฉันเชื่อว่ามันเป็น (อาจผิด)

 Request.QueryString["ajaxid"].ToString(); 

2
encodeURIComponentคุณไม่จำเป็นต้อง jquery จะทำสิ่งนี้ให้คุณ
เลน

2
@KlwWallace Nope นั่นคือ PHP (ฝั่งเซิร์ฟเวอร์) ขึ้นอยู่กับภาษาที่คุณใช้ ใน PHP นั้นเป็นวิธีที่เราได้รับค่าของการร้องขอ
bipen

1
@bipen รับทราบ. ฉันลบความคิดเห็นของฉันเพื่อไม่ให้ใครสับสน ขอบคุณ.
Kirby L. Wallace

คุณจำเป็นต้องแปลงวัตถุเป็นพารามิเตอร์ GET ด้วยฟังก์ชั่น jQuery.param () ดังนั้นการใช้ jQuery ที่คุณควรใช้data:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress})แทนdata: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Power

22

ใส่พารามิเตอร์ของคุณในdataส่วนของการajaxโทร ดูเอกสาร ชอบมาก

$.ajax({
    url: "/TestPage.aspx",
    data: {"first": "Manu","Last":"Sharma"},
    success: function(response) {
        //Do Something
    },
    error: function(xhr) {
        //Do Something to handle error
    }
});

10

นี่คือไวยากรณ์โดยใช้ jQuery $.get

$.get(url, data, successCallback, datatype)

ดังนั้นในกรณีของคุณนั่นก็เท่ากับ

var url = 'ajax.asp';
var data = { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress };
var datatype = 'jsonp';

function success(response) {
// do something here 
}

$.get('ajax.aspx', data, success, datatype)

หมายเหตุ $.getไม่ให้โอกาสคุณตั้งค่าตัวจัดการข้อผิดพลาด แต่มีหลายวิธีในการทำเช่นนั้นโดยใช้$ .ajaxSetup () , $ .ajaxError ()หรือผูกมัด a .failกับสิ่งที่คุณ$.getชอบด้านล่าง

$.get(url, data, success, datatype)
 .fail(function(){
})

เหตุผลสำหรับการตั้งค่าประเภทข้อมูลเป็น 'jsonp' เป็นเพราะประเด็นนโยบายเบราว์เซอร์กำเนิดเดียวกัน jsonแต่ถ้าคุณทำคำขอในโดเมนเดียวกันที่จาวาสคริปต์ของคุณจะเป็นเจ้าภาพคุณควรจะดีกับชุดประเภทข้อมูล

หากคุณไม่ต้องการที่จะใช้ jQuery $.getแล้วดูเอกสารสำหรับ$.ajaxซึ่งจะช่วยให้ห้องพักสำหรับความยืดหยุ่นมากขึ้น


4

ลองเพิ่มสิ่งนี้:

$.ajax({
    url: "ajax.aspx",
    type:'get',
    data: {ajaxid:4, UserID: UserID , EmailAddress: encodeURIComponent(EmailAddress)},
    dataType: 'json',
    success: function(response) {
      //Do Something
    },
    error: function(xhr) {
    //Do Something to handle error
    }
});

ขึ้นอยู่กับประเภทข้อมูลที่คาดว่าคุณสามารถกำหนดได้ html, json, script, xml


โซลูชันของคุณมีประโยชน์ แต่สงสัยว่าจะกำหนดตัวแปร ( ID) ข้างหน้าก่อนส่งผ่านเป็นพารามิเตอร์ได้อย่างไร ฉันมีคำถามในดังนั้น, stackoverflow.com/questions/41192531/... ฉันก้าวหน้าในคำถามนี้อีกมากซึ่งตอนนี้ฉันเรียกไดอะล็อก jquery และโทร ajax เพื่อดึงข้อมูลจาก mysql ฉันหายไปเชื่อมโยงเกี่ยวกับวิธีการเรียกรหัสเฉพาะที่เกี่ยวข้องกับแต่ละคลิก DataPoint ขอบคุณถ้าคุณสามารถช่วยฉันออก ขอขอบคุณ
user5249203

1

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

$.ajax({
    url: "ajax.aspx",
    data: [myVar = {id: 4, email: 'emailaddress', myArray: [1, 2, 3]}];
    success: function(response) {
    //Do Something
    },
    error: function(xhr) {
    //Do Something to handle error
    }
});

1
ทำไมคุณจะทำอย่างไรstringify? ajaxการใช้งานของ jQuery นั้นดูแลคุณ
Steve

1

มีปัญหาเดียวกันที่ผมระบุไว้dataแต่เบราว์เซอร์ได้รับการส่งการร้องขอไปยัง URL [Object object]ที่ลงท้ายด้วย

คุณควรจะมีชุดprocessDatatrue

processData: true, // You should comment this out if is false or set to true

OMG ขอบคุณ หลังจาก 4 ชั่วโมงของการค้นหาและลองสิ่งนี้ในที่สุดก็แก้ไขปัญหาได้ที่นี่ :-)
Kim K.


-1

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

var id=5;
$.ajax({
    type: "get",
    url: "url of server side script",
    data:{id:id},
    success: function(res){
        console.log(res);
    },
error:function(error)
{
console.log(error);
}
});

ที่ฝั่งเซิร์ฟเวอร์รับโดยใช้ตัวแปร $ _GET

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