Cómo pasar parámetros en solicitudes GET con jQuery

252

¿Cómo debería pasar valores de cadena de consulta en una solicitud jQuery Ajax? Actualmente los hago de la siguiente manera, pero estoy seguro de que hay una forma más limpia que no requiere que 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
    }
});

He visto ejemplos en los que los parámetros de cadena de consulta se pasan como una matriz, pero estos ejemplos que he visto no usan el $.ajax()modelo, sino que van directamente a $.get(). Por ejemplo:

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

Prefiero usar el formato $ .ajax () ya que es a lo que estoy acostumbrado (no hay una razón particularmente buena, solo una preferencia personal).

Editar 09/04/2013:

Después de que mi pregunta se cerró (como "Demasiado localizada") encontré una pregunta relacionada (idéntica), con 3 votos positivos no menos (Mi mal por no encontrarla en primer lugar):

Usando jquery para hacer una POST, ¿cómo suministrar adecuadamente el parámetro 'datos'?

Esto respondió a mi pregunta perfectamente, descubrí que hacerlo de esta manera es mucho más fácil de leer y no necesito usarlo manualmente encodeURIComponent()en la URL o los valores de DATOS (que es lo que encontré poco claro en la respuesta de bipen). Esto se debe a que el datavalor se codifica automáticamente mediante $.param()). En caso de que esto pueda ser útil para cualquier otra persona, este es el ejemplo que utilicé:

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

    },
    error: function(xhr) {

    }
});
HeavenCore
fuente
$ .get es solo un atajo para $ .ajax
Denys Séguret
excepto, su Edición 09/04/2013 es una solicitud de publicación :-) pero aparentemente funciona igual que GET.
commonpike

Respuestas:

307

Utilice la opción de datos de ajax. Puede enviar objetos de datos al servidor por dataopción en ajax y el typeque define cómo lo está enviando (ya sea POSTo GET). El tipo predeterminado es GETmétodo

Prueba esto

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

Y puede obtener los datos por (si está utilizando PHP)

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

En aspx, creo que es (podría estar equivocado)

 Request.QueryString["ajaxid"].ToString(); 
bipen
fuente
2
que no es necesario encodeURIComponent. jquery hará esto por ti.
Lane
2
@KlwWallace Nope. Eso es PHP (lado del servidor) depende del idioma del servidor que esté utilizando. En PHP así es como obtenemos los valores de get request.
bipen
1
@bipen. Entendido. Eliminé mi comentario para no confundir a nadie. Gracias.
Kirby L. Wallace el
necesita convertir el objeto en parámetros GET con la función jQuery.param (), por lo que debe usar jQuery data:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress}), en lugar dedata: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Engineering
22

Pon tus parámetros en la dataparte de la ajaxllamada. Ver los documentos . Al igual que:

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

Aquí está la sintaxis usando jQuery $.get

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

Entonces, en su caso, eso equivaldría 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 no le da la oportunidad de configurar un controlador de errores. Pero hay varias formas de hacerlo, ya sea usando $ .ajaxSetup () , $ .ajaxError () o encadenando un elemento .faila $.getcontinuación.

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

La razón para configurar el tipo de datos como 'jsonp' se debe a problemas de la misma política de origen del navegador, pero si realiza la solicitud en el mismo dominio donde está alojado su javascript, debería estar bien con el tipo de datos establecido en json.

Si no desea utilizar jquery $.get, consulte los documentos para $.ajaxobtener más flexibilidad.

theterminalguy
fuente
4

Intenta agregar esto:

$.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 de qué tipo de datos se espera, puede asignar html, json, script, xml

Jai
fuente
su solución es útil, pero ¿se pregunta cómo definir la variable ( ID) antes de pasarla como parámetro? Tengo Q en SO, stackoverflow.com/questions/41192531/… . Progresé mucho más en esta Q, donde ahora llamo a un diálogo jquery y llamo ajax para recuperar datos de mysql. Me falta el enlace sobre cómo recuperar la ID única asociada con cada clic en el punto de datos . Aprecio si puedes ayudarme. Gracias
user5249203
1

La propiedad de datos le permite enviar una cadena. En el código del lado del servidor, acéptelo como un nombre de argumento de cadena "myVar" y luego puede analizarlo.

$.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
fuente
1
¿Por qué lo harías stringify? La ajaximplementación de jQuery se encarga de eso por usted.
Steve
1

Tuve el mismo problema donde especifiqué datapero el navegador estaba enviando solicitudes a URL que terminaban con [Object object].

Deberías haberte processDatapuesto a true.

processData: true, // You should comment this out if is false or set to true
Webinan
fuente
Dios mío, gracias. Después de 4 horas de búsqueda y prueba, esto finalmente solucionó un problema aquí :-)
Kim K.
-1

El parámetro de datos del método ajax le permite enviar datos al lado del servidor. En el lado del servidor puede solicitar los datos. Vea el código

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

En el lado del servidor, recíbalo usando la variable $ _GET.

$_GET['id'];
ujjal
fuente