How to reload a div content without reloading the whole page after ajax call

Question

what i want to achieve is to reload the content of a div on a page without reloading the whole page, I want to reload the div to after photo upload so the newly uploaded photo can be loaded from the database but i don't want to reload the whole page, but the code was not working instead i got the whole page loading into the div likr below function ajaxLoad(){

     var loadUrl = window.location.href;
    // $(".carouser-inner ").load(loadUrl);
     $(".carouser-inner ").load(loadUrl+".carouser-inner ");
}

I call the function after ajax is successful, but below is what i got

WHAT I WANTED

But below is what i got, and after i reload the page it now go back to normal as i wanted

Any help on how to achieve this will be appreciated, thanks

Answer 1

作为jQuery .load（）的文档 ，您需要在url和选择器之间留一个空格，因此：

$(".carouser-inner ").load(loadUrl+" .carouser-inner");

Answer 2

First clear the div, then set the div's contents. You can clear it with a function, maybe clearDiv() or simply set .innerHTML = "" if that's all you need to do.

Fetching content with AJAX/XHR/Fetch is going to be asynchronous so you will need to architect that as a .Promise and resolve it .then set the content.

Answer 3

this completely depends on what the url you are calling with load() returns. It seems your url used in load() is returning the entire page's HTML.

Instead you want the url you use with load() to return just your html portion you want to load into the div

so there is no problem with your jquery call, it's the value returned by the url used with load() that needs to be fixed. That is a server-side question, nothing to do with the jquery code.

So, in brief: your fix is to fix the url used with load(), just make it return the partial html you want

HTH