Como passar parâmetros em solicitações GET com jQuery

252

Como devo transmitir valores de cadeia de consulta em uma solicitação do jQuery Ajax? Atualmente, eu os faço da seguinte maneira, mas tenho certeza de que existe uma maneira mais limpa que não exige que eu codifique manualmente.

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

Eu já vi exemplos em que os parâmetros da string de consulta são passados ​​como uma matriz, mas esses exemplos que eu vi não usam o $.ajax()modelo, em vez disso, eles vão direto para $.get(). Por exemplo:

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

Prefiro usar o formato $ .ajax (), pois é o que estou acostumado (sem uma razão particularmente boa - apenas uma preferência pessoal).

Editar 09/04/2013:

Depois que minha pergunta foi encerrada (como "Too Localized"), encontrei uma pergunta relacionada (idêntica) - com três votos positivos (meu pior por não encontrá-la em primeiro lugar):

Usando jquery para criar um POST, como fornecer corretamente o parâmetro 'data'?

Isso respondeu minha pergunta perfeitamente, e achei que fazê-lo dessa maneira é muito mais fácil de ler e não preciso usar manualmente encodeURIComponent()os valores de URL ou DATA (que é o que eu achei incerto na resposta do bipen). Isso ocorre porque o datavalor é codificado automaticamente via $.param()). Caso isso possa ser útil para qualquer outra pessoa, este é o exemplo com o qual eu fui:

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

    },
    error: function(xhr) {

    }
});
HeavenCore
fonte
$ .get é apenas um atalho para $ .ajax
Denys Séguret
exceto que seu Edit 09/04/2013 é uma solicitação de postagem :-) mas aparentemente funciona da mesma forma que GET.
commonpike

Respostas:

307

Use a opção de dados do ajax. Você pode enviar o objeto de dados para o servidor por dataopção no ajax e o typeque define como você o está enviando ( POSTou GET) O tipo padrão é GETmétodo

Tente isto

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

E você pode obter os dados (se você estiver usando PHP)

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

No aspx, acredito que seja (pode estar errado)

 Request.QueryString["ajaxid"].ToString(); 
bipen
fonte
2
você não precisa encodeURIComponent. jquery fará isso por você.
Lane
2
@KlwWallace Nope. Esse PHP (lado do servidor) depende da linguagem do servidor que você está usando. Em PHP, é assim que obtemos os valores da solicitação get.
bipen
1
@bipen. Entendido. Eu apaguei meu comentário para não confundir ninguém. THX.
Kirby L. Wallace
você precisa converter o objeto em parâmetros GET com a função jQuery.param (), portanto, usando o jQuery, você deve usar data:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress}) , em vez dedata: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Engineering
22

Coloque seus parâmetros na dataparte da ajaxligação. Veja os documentos . Igual a:

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

Aqui está a sintaxe usando jQuery $.get

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

Então, no seu caso, isso equivaleria a,

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)

Nota $.get não oferece a oportunidade de definir um manipulador de erros. Mas existem várias maneiras de fazer isso usando $ .ajaxSetup () , $ .ajaxError () ou encadeando um .failno seu exemplo $.getabaixo

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

O motivo para definir o tipo de dados como 'jsonp' deve-se aos mesmos problemas de política de origem do navegador, mas se você estiver fazendo a solicitação no mesmo domínio em que seu javascript está hospedado, deverá concordar com o tipo de dados definido como json .

Se você não quiser usar o jquery $.get, consulte os documentos para os $.ajaxquais há espaço para mais flexibilidade

theterminalguy
fonte
4

Tente adicionar isto:

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

Depende do tipo de dados esperado, você pode atribuir html, json, script, xml

Jai
fonte
sua solução é útil, mas quer saber como definir a variável ( ID) adiante antes de passá-la como parâmetro? Eu tenho Q no SO, stackoverflow.com/questions/41192531/… . Eu progredi neste Q muito mais longe, onde agora chamo uma caixa de diálogo jquery e chamo ajax para recuperar dados do mysql. Estou com falta do link sobre como recuperar o ID exclusivo associado a cada clique no ponto de dados . Aprecie se você pode me ajudar. Obrigado
user5249203
1

A propriedade data permite enviar uma sequência. No código do lado do servidor, aceite-o como um nome de argumento de cadeia "myVar" e, em seguida, você poderá analisá-lo.

$.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
    }
});
Danwilliger
fonte
1
Por que você faria stringify? A ajaximplementação do jQuery cuida disso para você.
Steve
1

Tive o mesmo problema em que eu especifiquei, datamas o navegador estava enviando solicitações para o URL que terminava com [Object object].

Você deveria ter processDatadefinido como true.

processData: true, // You should comment this out if is false or set to true
Webinan
fonte
OMG, obrigado. Após 4 horas de busca e tentar este, finalmente, fixa um problema aqui :-)
Kim K.
-1

O parâmetro data do método ajax permite enviar dados para o lado do servidor.No lado do servidor, você pode solicitar os dados.

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

No lado do servidor, receba-o usando a variável $ _GET.

$_GET['id'];
ujjal
fonte