如何使用Ajax在div中添加页面内容？

Question

I have a list in my site, and when I click each of the list items, I want the div next to them to reload with ajax, so as not to reload the whole page.

Here is my javascript

  parameters = "category_id="+categoryId;
  var result = ajaxFunction("changeCategory.php", parameters);
  $("#mydiv").html(result);

The ajaxFunction() function is the regular $.ajax() jQuery function, with "POST". In the "changeCategory.php" I call with include another php file. The problem is that the whole page is reloaded instead of only the div. I want to use this ajax function I have, cause I want to send data to my php file.

Does anyone know what should I do to reload only the div?

Thanks in advance

Answer 1

Try using load to load the div with the url contents -

$("#mydiv").load("changeCategory.php", {category_id: "category_id_value"} );

You can pass data to the url.

The POST method is used if data is provided as an object; otherwise, GET is assumed.

Answer 2

Try this

$(document).ready(function(){
    var parameters = {category_id:categoryId};
    $.ajax({
        url:'changeCategory.php',
        type:'post',
        data:parameters,
        dataType:'html',
        success:function(result){
            $("#mydiv").html(result);
        },
        error:function(){
            alert('Error in loading [itemid]...');
        }
    });

});

Also verify that when in your click event this line is written or not return false; This is required.

Answer 3

you could send a query to that PHP so it "understands" that it needs to output only the div, like this:

in your javascript:

//add the query here
parameters = "category_id="+categoryId + "&type=divonly";
var result = ajaxFunction("changeCategory.php", parameters);
$("#mydiv").html(result);

in your "changeCategory.php":

//add a query check:
$type = "";
if (isset($_POST['type'])) {
    $type = $_POST['type'];
}

//then, depending on the type, output only the div:
if($type === "divonly"){
   //output the div only;
} else {
   //your normal page
}

Answer 4

The whole page is reloaded that means there may be an error in your javascript code

check it again or try this one

function name_of_your_function(id)
{   

var html =  $.ajax({
   type: "GET",
   url: "ajax_main_sectors.php",
   data: "sec="+id,
   async: false
  }).responseText;


    document.getElementById("your div id").innerHTML=html;
}

you can use get method or post method....

Answer 5

$(document).ready(function() {
    $.ajax({
        url: "right.php",
        type: "POST",
        data: {},
        cache: false,
        success: function (response) {

            $('#right_description').html(response);
        }
    });

});