Jak przekazywać parametry w żądaniach GET za pomocą jQuery


252

Jak mam przekazywać wartości ciągu zapytania w żądaniu Ajax jQuery? Obecnie wykonuję je w następujący sposób, ale jestem pewien, że istnieje czystszy sposób, który nie wymaga ode mnie ręcznego kodowania.

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

Widziałem przykłady, w których parametry ciągu zapytania są przekazywane jako tablica, ale te przykłady, które widziałem, nie używają $.ajax()modelu, zamiast tego idą prosto do $.get(). Na przykład:

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

Wolę używać formatu $ .ajax (), ponieważ jestem do tego przyzwyczajony (bez szczególnie dobrego powodu - tylko osobiste preferencje).

Edytuj 09.04.2013:

Po tym, jak moje pytanie zostało zamknięte (jako „Too Localized”), znalazłem powiązane (identyczne) pytanie - z nie mniejszymi 3 opiniami (Moje złe, że go nie znalazłem):

Używając jquery do wykonania testu POST, jak poprawnie podać parametr „data”?

To doskonale odpowiedziało na moje pytanie, stwierdziłem, że zrobienie tego w ten sposób jest znacznie łatwiejsze do odczytania i nie muszę ręcznie używać encodeURIComponent()w adresie URL lub wartości DANYCH (co znalazłem niejasne w odpowiedzi Bipen). Jest tak, ponieważ datawartość jest kodowana automatycznie przez $.param()). Na wszelki wypadek może to być przydatne dla kogokolwiek innego, oto przykład z którym poszedłem:

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

    },
    error: function(xhr) {

    }
});

$ .get to tylko skrót do $ .ajax
Denys Séguret

z wyjątkiem tego, że edycja 09.04.2013 jest prośbą o wpis :-), ale najwyraźniej działa tak samo jak GET.
commonpike

Odpowiedzi:


307

Użyj opcji danych ajax. Możesz wysłać obiekt danych do serwera za pomocą dataopcji w ajax i typektóra określa sposób wysyłania go (albo POSTalbo GET). Domyślnym typem jest GETmetoda

Spróbuj tego

$.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
  }
});

I możesz uzyskać dane przez (jeśli używasz PHP)

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

W aspx uważam, że jest (może być źle)

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

2
nie potrzebujesz encodeURIComponent. jquery zrobi to za ciebie.
Lane

2
@KlwWallace Nope. To PHP (po stronie serwera) zależy od używanego języka servside. W PHP tak otrzymujemy wartości get request.
bipen

1
@bipen. Przyjąłem. Usunąłem swój komentarz, aby nikogo nie mylić. Dzięki.
Kirby L. Wallace

musisz przekonwertować obiekt na parametry GET za pomocą funkcji jQuery.param (), więc używając jQuery powinieneś użyć data:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress})zamiastdata: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Engineering

22

Umieść swoje parametry w dataczęści ajaxpołączenia. Zobacz dokumenty . Tak jak:

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

10

Oto składnia przy użyciu jQuery $.get

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

W twoim przypadku oznaczałoby to,

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)

Uwaga $.get nie daje możliwości ustawienia procedury obsługi błędów. Ale istnieje kilka sposobów, aby to zrobić albo z użyciem $ .ajaxSetup () , $ .ajaxError () lub łańcuchowym .failna własną $.getjak poniżej

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

Przyczyną ustawienia typu danych jako „jsonp” są problemy związane z tymi samymi zasadami przeglądarki, ale jeśli wysyłasz żądanie w tej samej domenie, w której hostowany jest skrypt javascript, powinieneś mieć ustawiony typ danych na json .

Jeśli nie chcesz korzystać z jQuery $.getnastępnie zobaczyć docs na $.ajaxco pozwala na większą elastyczność pokój


4

Spróbuj dodać to:

$.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
    }
});

W zależności od oczekiwanego typu danych można przypisać html, json, script, xml


Twoje rozwiązanie jest pomocne, ale zastanawiasz się, jak zdefiniować zmienną ( ID) przed przekazaniem jej jako parametru? Muszę Q w SO stackoverflow.com/questions/41192531/... . Postępowałem znacznie dalej w tym Q, gdzie teraz wywołuję okno dialogowe jquery i wywołuję ajax, aby pobrać dane z mysql. Brakuje mi linku, w jaki sposób uzyskać unikalny identyfikator powiązany z każdym kliknięciem punktu danych . Doceń, jeśli możesz mi pomóc. Dziękuję
user5249203,

1

Właściwość data umożliwia wysłanie ciągu. Na kodzie serwera zaakceptuj go jako ciąg znaków o nazwie „myVar”, a następnie możesz go przeanalizować.

$.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
Dlaczego miałby to zrobić stringify? ajaxWdrożenie jQuery dba o to za Ciebie.
Steve

1

Miałem ten sam problem, który określiłem, dataale przeglądarka wysyła żądania na adres URL kończący się na[Object object] .

Powinieneś był processDataustawić true.

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

OMG, dzięki. Po 4 godzinach szukania i wypróbowania tego w końcu naprawiono problem :-)
Kim K.


-1

Parametr danych metody ajax pozwala na wysyłanie danych po stronie serwera. Po stronie serwera można zażądać danych. Zobacz kod

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);
}
});

Po stronie serwera otrzymaj go za pomocą zmiennej $ _GET.

$_GET['id'];
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.