如何在URL中使用带有＃标签的GET方法？

Question

For example: www.example.com#?id=10

So far I am not getting any value from $_GET['id']. I tried to remove the hashtag from the URL with JavaScript, but nothing happens:

$(document).ready(function(){
   $(window.location.hash).modal('show');
   $('a[data-toggle="modal"]').click(function(){
      window.location.hash.replace('#', '') = $(this).attr('href');
   });
});

I know that I could use ajax, the thing is that I am unfamiliar with it when it comes to using GET and POST. I am trying to take this anchor href:

echo '<a  href="?id='.$row['id'].'" id="smallbtn" data-toggle="modal"
                          data-target="#small"  data-modal="small">';

And send it to the URL without refreshing the page. Is it possible to accomplish this?

Answer 1

You seem to be mixing up PHP and JavaScript since both statements you show are from both sides. So your question is not crystal clear...

When you click on an anchor link, the browser does this:

window.location = jQuery("#smallbtn").attr("href");

So you don't have to do that yourself if that's all that has to happen (obviously).

Now, you mention anchors (#something) but in your example, you have none of them. If you currently have an anchor in your URL and you are trying to get rid of it as the user clicks on the link, then that's already how that works. So again, nothing more to do.

If there could be an anchor in the "href" attribute and you do not want it, then you want to do something like this:

var href = jQuery("#smallbtn").attr("href"),
    parts = href.split("#");

window.location = parts[0]; // ignore anything after the '#'

However, either way, this will force a reload of the new location. From what you are saying, you want to "change the URL" (in the location bar) but not reload the page. This is done using the History API of the browser. Most support that feature now.

window.history.pushState(
    {
        "html": html,
        "pageTitle": page_title
    },
    "",
    url);

The pushState() defines the page HTML, title, and URL. It will not reload anything, nor change anything in the browser. That's your responsibility. The one thing that will change is the URL in the location bar. It gets set to 'url'.

To change your browser title you do:

document.title = page_title;

And to change your browsers HTML (assuming you want to change the entire page) you do:

jQuery(body).innerHTML = html;

All in all, though, you'll have to learn AJAX. Frankly, it's just using the jQuery.ajax object to send a GET or POST request to your PHP code which answers with XML or JSON (XML is nice with jQuery, it can parse it like the DOM) and use that data whenever you callback gets called to change the title, HTML, whatnot on the client's side. That's all there is to it!

I think that the hardest part is not AJAX in itself, but the fact that whenever you change the DOM, the existing jQuery() listeners fail to automatically acknowledge the new tags. This dynamic DOM handling is what makes "AJAX" complicated, without it really being part of AJAX (since AJAX is just the sending of a GET or POST and handling of the answer.)