How to pass parameters in GET requests with jQuery

Problem

In a jQuery Ajax request, how should I supply query string values? I presently do it this way, but I’m sure there’s a better technique that doesn’t require me to manually encode them.

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

I’ve seen situations where query string parameters are supplied as an array, but they don’t use the $.ajax() model; instead, they use the $.get() model (). Consider the following scenario:

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

Because it’s what I’m used to, I prefer to utilize the $.ajax() format (no particularly good reason – just a personal preference).

Edit 09/04/2013:

After my question was closed (as “Too Localized”), I came upon a related (same) question – with three upvotes to boot (my fault for not seeing it sooner):

How do I properly supply the ‘data’ argument when using jquery to generate a POST?

This fully answers my concern; I found that doing it this way makes it lot easier to read, and I don’t have to use encodeURIComponent() in the URL or the DATA values manually (which I found unclear in bipen’s answer). This is due to the fact that the data value is automatically encoded using $.param()). This is the example I used, just in case it can be useful to anyone else:

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

    },
    error: function(xhr) {

    }
});

Asked by HeavenCore

Solution #1

Use the ajax data option. The data option in ajax and the type, which describes how you are providing it, can be used to transmit data objects to the server (either POST or GET). The GET method is the default kind.

Try this

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

You can also obtain the information through (if you are using PHP)

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

In aspx, I believe it is (might be wrong)

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

Answered by bipen

Solution #2

Put your parameters in the ajax call’s data section. Take a look at the documentation. As follows:

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

Answered by Cianan Sims

Solution #3

The following is the jQuery $.get syntax.

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

So, in your situation, that would be,

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)

Note The $.get method does not allow you to provide an error handler. However, there are various ways to accomplish this, like utilizing $.ajaxSetup(), $.ajaxError(), or chaining a.fail on your $.get like in the example below.

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

Due to browser same origin policy concerns, the datatype is set to ‘jsonp,’ but if you are making the request on the same domain as your javascript, you should be alright with datatype set to json.

If you don’t want to utilize jquery’s $.get, check out the documentation for $.ajax, which offers more freedom.

Answered by theterminalguy

Solution #4

Try adding this:

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

You can use html, json, script, or xml depending on the datatype.

Answered by Jai

Solution #5

You can send a string using the data property. Accept it as a string argument named “myVar” in your server-side function, and then parse it out.

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

Answered by Danwilliger

Post is based on https://stackoverflow.com/questions/15576548/how-to-pass-parameters-in-get-requests-with-jquery