Normal AJAX to jquery conversion

Question

function func1(a,b) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   document.getElementById("test").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","includes/funkcije.php?min="+a+"&max="+b,true);
xmlhttp.send();

I have tried to make something but it doesn't work. It just puts me at the top of the page

$('#page-01').ajax({
type: "GET",
url: "includes/funkcije.php",
data: "min=0&max=10",
success: function(data) {
    $('#test').text(data);
}
})
$('#page-02').ajax({
url: "includes/funkcije.php",
data: "min=10&max=20",
success: function(data) {
    $('#test').text(data);
}
})

these are the links that I press to execute func1

<li><a id="page-01" href="javascript:func1(0,10)">1</a></li>
<li><a id="page-02" href="javascript:func1(10,20)">2</a></li>

This is made to list pages of posts on my site Tristann.tk. Can someone please help me with this or tell me a better way to make those pages?

I fixed it with this code:

$(document).ready(function(){
$('#page-01').on('click', function () {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=0&max=10",
        success: function(data) {
            $('#test').html(data);
        }
    });
});

$('#page-02').on('click', function () {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=10&max=20",
        success: function(data) {
            $('#test').html(data);
        }
    });
});
});

and the links are like this:

<a id="page-01" href="javascript:void(0)">1</a>
<a id="page-02" href="javascript:void(0)">2</a>

Answer 1

Try

$('#page-01').on('click', function () {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=0&max=10",
        success: function(data) {
            $('#test').text(data);
        }
    });
});

$('#page-02').on('click', function () {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=10&max=20",
        success: function(data) {
            $('#test').text(data);
        }
    });
});

You cannot call the ajax function on a jQuery object - you can only target objects in the success function. Look at the jQuery documentation.

EDIT

HTML:

<li><a id="page-01" href="javascript:func1(0,10)">1</a></li>
<li><a id="page-02" href="javascript:func1(10,20)">2</a></li>

Javascript:

var func1 = function(min, max) {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=" + min + "&max=" + max,
        success: function(data) {
            $('#test').text(data);
        }
    });        
}

Answer 2

You might want to do something like this, you can use $.ajax instead of the getData function.

function getData(dest, param) {

  var XMLHttpRequestObject = false;

  if(window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
  } else if(window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }

  if(XMLHttpRequestObject) {

    var div = document.getElementById(dest);

    XMLHttpRequestObject.open("GET", "includes/funkcije.php?" + param);

    XMLHttpRequestObject.onreadystatechange = function() {

      if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {

        div.innerHTML = XMLHttpRequestObject.responseText;
        XMLHttpRequestObject.delete;
        XMLHttpRequestObject = false;

      }
    }
    XMLHttpRequestObject.send(null);
  }
}

$("#page-01").click(getData("#test", "min=0&max=10"));
$("#page-02").click(getData("#test", "min=0&max=20"));

Answer 3

look into jquery load and get

$('#test').load("includes/funkcije.php?min=0&max=10");