How to add parameters to the URL with JQuery/AJAX

Question

When using the get method on an HTML form the submitted data shows up in the URL. This page shows what I mean. I have been trying to get this to work with JQuery and AJAX using the get method but the data is not showing up in the URL for some reason. Does anyone know why? Here is my code:

$(function() {
    $('#mylink').click(function () {    
        $.get("submit.php", { name: 'John' }, function(data) {
            // blah blah blah
        });
    });
});

I want the end of the URL to be appended with ?name=John and be able to access it with the $_GET variable. How can I do this?

mattsven · Accepted Answer · 2011-03-21 03:20:35Z

5

What you have works: jQuery's AJAX converts { name: 'John' } to submit.php?name=John.

And you'd access it in your PHP script like this:

<?php
echo $_GET["name"]; //ECHOs out "John"
?>

BTW don't forget to prevent the link from changing the page -

$('#mylink').click(function() {    
    $.get("submit.php", { name: 'John' }, function(data) {
        // blah blah blah
    });
    return false; //Prevents the default behavior of the link
});

edited Mar 21, 2011 at 3:20

answered Mar 21, 2011 at 3:15

mattsven

23.5k11 gold badges73 silver badges106 bronze badges

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

5 Comments

John Smith Over a year ago

It's still not working. I changed the PHP script to be identical to the one you posted and and used alert on the data variable and it came out to be John. However, the URL remained static throughout, even with the return false. Any ideas?

Phil Over a year ago

@John You're using AJAX so the URL will not change. If you're getting John back in the data variable, then it's working as expected

mattsven Over a year ago

Exactly...otherwise you need a <form>.

John Smith Over a year ago

I want the URL to change though. I want users to be able to edit the URL and have the page react accordingly.

Phil Over a year ago

@NeXXeuS or a normal link with no click handler <a id="mylink" href="submit.php?name=John">Link Text</a>

Phil · Accepted Answer · 2011-03-21 03:18:39Z

1

Looks like you're missing return false; in the click handler. Probably why you're not seeing what you expect.

Eg

$(function() {
    $('#mylink').click(function () {    
        $.get("submit.php", { name: 'John' }, function(data) {
            // blah blah blah
        });
        return false;
    });
});

answered Mar 21, 2011 at 3:18

Phil

166k25 gold badges265 silver badges269 bronze badges

Comments

fitzgeraldsteele · Accepted Answer · 2011-03-21 03:19:02Z

0

Why not just append it to the link?

$.get("submit.php?name=" + username), function(data){ ... });

BTW...please heed all the normal warnings out there about server side sanitation of your input url. No one wants to meet Little Bobby Tables...

answered Mar 21, 2011 at 3:19

fitzgeraldsteele

4,5573 gold badges26 silver badges25 bronze badges

1 Comment

Phil Over a year ago

I find the object map format much cleaner to look at and maintain

Collectives™ on Stack Overflow

How to add parameters to the URL with JQuery/AJAX

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related