Как передать параметры в запросах GET с помощью jQuery


254

Как я должен передавать значения строки запроса в запросе 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/2013:

После того, как мой вопрос был закрыт (как «Слишком Локализованный»), я нашел связанный (идентичный) вопрос - с 3-мя ответами не менее (Мой плохой, потому что я не нашел его в первую очередь):

Используя jquery для создания POST, как правильно указать параметр 'data'?

Это отлично ответило на мой вопрос, я обнаружил, что делать это таким образом гораздо проще для чтения, и мне не нужно вручную использовать значения encodeURIComponent()URL или DATA (что я нашел неясным в ответе Бипена). Это потому, что 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
Денис Сегюре

кроме того, ваш Edit 09/04/2013 является почтовым запросом :-), но он, очевидно, работает так же, как GET.
обычная щепа

Ответы:


310

Используйте параметр данных 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 Нету. То, что PHP (на стороне сервера) зависит от того, какой язык на стороне сервера вы используете. В PHP так мы получаем значения запроса get.
Бипен

1
@bipen. Заметано. Я удалил свой комментарий, чтобы никого не смущать. Спасибо.
Кирби Л. Уоллес

вам нужно преобразовать объект в параметры GET с помощью функции jQuery.param (), поэтому, используя jQuery, вы должны использовать data:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress})вместоdata: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Engineering

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 () или соединить последовательно .failна ваш , $.getкак показано ниже

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

Причиной установки типа данных «jsonp» являются проблемы, связанные с политикой исходного браузера, но если вы делаете запрос в том же домене, где размещен ваш javascript, у вас должно быть все в порядке с типом данных, установленным в 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) перед ее передачей в качестве параметра? У меня есть Q на SO, stackoverflow.com/questions/41192531/… . Я продвинулся в этом вопросе гораздо дальше, где теперь я вызываю диалог jquery и вызываю ajax для извлечения данных из mysql. Мне не хватает ссылки для получения уникального идентификатора, связанного с каждым кликом по точке данных . Ценю, если вы можете мне помочь. Спасибо
user5249203

1

Свойство data позволяет отправлять в виде строки. В коде вашего сервера примите его как строковый аргумент с именем «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 позаботится об этом за вас.
Стив

1

Была та же проблема, где я указал, dataно браузер отправлял запросы на URL, заканчивающийся на [Object object].

Вы должны были processDataустановить true.

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

О боже, спасибо. После 4 часов поисков и попыток это наконец
Ким К.


-1

Параметр data метода 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'];
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.