How should I pass multiple variables to url in jquery ajax?

Question

I am tryin to pass multiple values in the below method but I am unable to get this to work. What is the correct syntax? I have tried

data: ('keyword='+$(this).val(),'id='10),

and

data: {'keyword='+$(this).val(),'id='10},

and

data: {'keyword='+$(this).val(),'&id='10}//I have also tried to replace the curly braces with brackets.

This works so I think its a syntax problem?

data: ('keyword='+$(this).val())

Here is my complete request. I am using GET, I have tried using POST to no avail.

$.ajax({
    type: "GET",
    url: "showhints.php",
    data: ('keyword='+$(this).val()),
    beforeSend: function() {
        $("#search-box").css("background","#FFF url(loading.gif) no-repeat 165px");
    },
    success: function(data) {
        $("#suggesstion-box").show();
        $("#suggesstion-box").html(data);
        $("#search-box").css("background","#FFF");
    }
});

charlietfl · Accepted Answer · 2017-01-21 12:56:48Z

5

The easiest is to use an object literal which will then be uri encoded internally

data: {keyword: $(this).val(), id : 10}

answered Jan 21, 2017 at 12:56

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivaylo Stoev · Accepted Answer · 2017-01-21 12:57:55Z

1

You would do it like

...
data: {
            keyword: $(this).val(),
            id: 10
},
...

answered Jan 21, 2017 at 12:57

Ivaylo Stoev

4874 silver badges8 bronze badges

Comments

NITIN PATEL · Accepted Answer · 2017-01-21 13:00:39Z

1

You can send multiple values like this

   $.ajax({
            type: "GET",
            url: "showhints.php",
            data: {'key':'value','key':'value',..},
            beforeSend: function(){
                $("#search-box").css("background","#FFF url(loading.gif) no-repeat 165px");
            },
            success: function(data){
                $("#suggesstion-box").show();
                $("#suggesstion-box").html(data);
                $("#search-box").css("background","#FFF");
            }

answered Jan 21, 2017 at 13:00

NITIN PATEL

4605 silver badges12 bronze badges

Comments

Syden · Accepted Answer · 2017-01-21 13:15:29Z

0

Try the following:

HTML:

<form action="">
    <input type="text" name="name">
    <input type="text" name="surname">
    <input type="submit" name="submitForm">
</form>

Ajax call:

var name = $('input[name]');
var surname = $('input[surname]');
$('input[submitForm]').click(function() {
    url: 'someLink.php',
    dataType: json,
    data: {
        name: name.val(),
        surname: surname.val()
    },
    success: function(data) {
        console.log(data)
    }
});

edited Jan 21, 2017 at 13:15

Syden

8,6455 gold badges30 silver badges46 bronze badges

answered Jan 21, 2017 at 12:57

Farid Ganbarli

11 bronze badge

Collectives™ on Stack Overflow

How should I pass multiple variables to url in jquery ajax?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related