JQuer Ajax GET basics

Question

Hi folks, me again - sorry - I am trying to "teach myself" with help here some basic Jquery Ajax so far so good, but .. no offence to people sometimes the answers are very specific to requests - great, but may not be as helpful to others as certainkly a quick google search can get complex. I have got a lot, but it is the simple things that I get stuck on. Try this. A simple .click event and get using JQuery Ajax. to show results of the ajaxed page in a div.

<a href="?abc=1"  id="idoflink">Try this link to get results</a>
<div id="testit"></div>

Then Jquery/Ajax

$(document).ready(function(){

$('#idoflink').click(function() {   

 var idoflinkvaliable = $("#idoflink");

    $.ajax({
    cache: false, type: "GET", url: "tryit.php", data: "test=" + idoflinkvaliable,
    complete: function(data){ $("#testit").html(data.responseText); }

    });

    return false;
});
}); 

I know it'is not right - it doesn't work I get [object Object] - so whicj bit is wrong, my guess is in defining the variable?. I know this is only a simple example but as I said I am trying to self teach - know PHP backwards - and a lot of what I find on Google starts beyond this, so your answers may not just help me but hopefully many others to. Thanks in adavance.

Answer 1

Don't go through $.ajax(); for something like this. It's over-complicated for the task at hand. Also, it appears you're expecting json from the looks of your callback. That being the case, I recommend you use $.getJSON(); instead:

$("#myLink").click(function(e){
  e.preventDefault();
  $.getJSON("tryit.php", { 'test':$(this).attr("id") }, function(data){
    // do something with data
    $(data).each(function(){
      $("#testit").append(this);
    });
  });
});

Also, be sure you're sending properly-encoded JSON back from your PHP script:

$values = array("red","green","blue");
print json_encode($values);

Answer 2

The above answer assumes you're returning JSON-encoded data. If you aren't (it looks like from your usage you're wanting to return raw HTML instead of JSON data):

You can look here: JQuery AJAX Samples. But it looks like you're supposed to be using the success event instead of the complete event:

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

Hope this helps. Another thing to make is that your PHP script is returning the correct data as well.

Answer 3

$("#idoflink").attr("href") will get ?abc=1 from your link. You can append it to the url like this:

$(document).ready(function(){

  $('#idoflink').click(function() {   

    var idoflinkvaliable = $("#idoflink");

    $.ajax({
      cache: false,
      type: "GET",
      url: "tryit.php" + $("#idoflink").attr("href"),
      success: function(data){
        $("#testit").html(data.responseText);
      }
    });

    return false;
  });
});

Answer 4

Something like this should work:

var href = $("#idoflink").attr("href");
if (href.indexOf("?") == 0 ) {
     href = href.substring(1, href.length() - 1);
}
$.ajax({   
cache: false, type: "GET", url: "tryit.php", data: href,   
success: function(data){ $("#testit").html(data.responseText); }   

}); 

Answer 5

Sorry folks but I guess I am not explaining myself very well at all. None of the answers work/explain to me stress to me how to do it. There are 4 totally different answers to one basic question.

I had haped the question was quite simple - take a variable from an href i.e. pass that variable through JQuery/ajax to another page and then return the results into a div on the original page. In php it is simple i.e. if(isset($_GET['nameofvariable']): // do this // endif;

I have tried all the answers above with a simple echo $_GET['nameofvariable']; on the receiving page but none of them give me the right result - sorry.