HTML Get URL parameter

Question

I want to change url without reload the page because Im using AJAX function to reload a div. The problem is that when the AJAX load the div, it doesn't read the url parameter.

My code (I've already load the jquery.js etc.) :

index.php

<a href="#page=1" onClick='refresh()'> Link </a>
<a href="#page=2" onClick='refresh()'> Link2 </a>


<script type="text/javascript">

 $.ajaxSetup ({
    cache: false
 });

 function refresh() {

    $("#test").load("mypage.php"); //Refresh
}

</script>



<div id="test">

</div>

mypage.php

 <?php 

 if (isset($_GET['page'])){

   $page = $_GET['page'];
 }
echo $page;

?>

You can pass parameters in the load function. $("#test").load("mypage.php"); becomes $("#test").load("mypage.php?page=mypage"); — MisterBla
– MisterBla, Commented Jul 26, 2013 at 13:32
I don't understand what you are trying to do. Can you explain a bit better? — putvande
– putvande, Commented Jul 26, 2013 at 13:32
@putvande, it's a exemple, my real code is too much bigger, I want load all my website's pages only using AJAX — LeSam
– LeSam, Commented Jul 26, 2013 at 13:36
Maybe what you are looking for is the HTML5 history API. Have a look at that. — putvande
– putvande, Commented Jul 26, 2013 at 13:39

rudikovac · Accepted Answer · 2013-07-26 13:50:25Z

PHP can't read the fragment without reloading the page. This can be done using JS.

Below the script I use to read the parameter values without reloading the page. I don't think it's the best method there is, as there are plugins you could use to do the same (and much more), but it works. I found it online some time ago, but unfortunately I don't remember where :(

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.hash.slice(1);
    urlParams = {};
    while (match = search.exec(query)) {
       urlParams[decode(match[1])] = decode(match[2]);
    }
})();

You would then get the parameter value with:

urlParams['page']

If you will work a lot with hash urls, you should check out this plugin: http://benalman.com/projects/jquery-bbq-plugin/

Bora · Accepted Answer · 2013-07-28 01:30:30Z

0

Getting after # hash tag:

With PHP (Required page load)

parse_url() fragment index thats you need

$url = parse_url($_SERVER['REQUEST_URI']);
$url["fragment"]; //This variable contains the fragment

With jQuery: (Not required page load)

var hash = $(this).attr('href').split('#')[1];
var hash = $(this).attr('href').match(/#(.*$)/)[1];

Demo (Used without hash tag)

index.php

<a href="#" class="myLink" data-id="1"> Link </a> | <a href="#" class="myLink"  data-id="2"> Link2 </a>

<script type="text/javascript">
 $(".myLink").click(function(e) { // when click myLink class
    e.preventDefault(); // Do nothing
    var pageId = $(this).attr('data-id'); // get page id from setted data-id tag
    $.ajax({
        type:'POST',
        url:'mypage.php', // post to file
        data: { id: pageId}, // post data id
        success:function(response){ 
            $("#test").html(response); // write into div on success function
        }
    });
});
</script>

<div id="test"></div>

mypage.php

<?php 
// get with $_POST['id']
echo "Loaded Page ID: ".($_POST['id'] ? $_POST['id'] : "FAILED");
?>

edited Jul 28, 2013 at 1:30

answered Jul 26, 2013 at 13:36

Bora

10.7k5 gold badges50 silver badges76 bronze badges

2 Comments

LeSam Over a year ago

can you show me an exemple of use (for jQuery), because I don't know what to do with the jQuery code.

Bora Over a year ago

@user2372006 sorry for late.. Im busy yesterday.. Added demo code. I did make it without hash tag.

Chris McFarland · Accepted Answer · 2013-07-26 13:35:32Z

0

You need to pass a page parameter to the URL you're requesting.

Try this:

<a href="#page=1" onClick='refresh(1)'> Link </a>
<a href="#page=2" onClick='refresh(2)'> Link2 </a>


<script type="text/javascript">

 $.ajaxSetup ({
    cache: false
 });

 function refresh(pageNumber) {

    $("#test").load("mypage.php?page="+pageNumber); //Refresh
}

</script>

answered Jul 26, 2013 at 13:35

Chris McFarland

6,1695 gold badges46 silver badges64 bronze badges

1 Comment

LeSam Over a year ago

load works but, the problem is that I can't send a link of my current position on the website to someone by this way. that's why I want that the paramater show themselve on the URL BAR.

MisterBla · Accepted Answer · 2013-07-26 13:39:18Z

0

It is possible for you to pass parameters through the load() function in jQuery.

There are 2 common ways of doing so:

Using get:

JS:

$('#test').load('mypage.php?page=mypage');

PHP:

<?php

if (isset($_GET['page']))
{
    $page = $_GET['page'];
}
echo $page;

?>

Or using data as a post:

JS:

$('#test').load('mypage.php', { page: mypage });

PHP:

if (isset($_POST['page']))
{
    $page = $_POST['page'];
}
echo $page;

?>

answered Jul 26, 2013 at 13:39

MisterBla

2,3951 gold badge20 silver badges29 bronze badges

2 Comments

LeSam Over a year ago

I don't want POST, and passing parameter in the load works but, the problem is that I can't send a link of my current position on the website to someone by this way. that's why I want that the paramater show themselve on the URL BAR.

MisterBla Over a year ago

Then you should look at Bora's answer. :)

Collectives™ on Stack Overflow

HTML Get URL parameter

4 Answers 4

Comments

With PHP (Required page load)

With jQuery: (Not required page load)

Demo (Used without hash tag)

index.php

mypage.php

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

With PHP (Required page load)

With jQuery: (Not required page load)

Demo (Used without hash tag)

index.php

mypage.php

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related