Ajax加载重复整个页面

Question

I am trying to refresh a div with jquery load(); but the load displays the correct information but duplicates entire parts of the page that arent in the div

$.ajax({
       type: 'POST',
       url: $(this).attr('action'),
       cache: false,
       data: $("#uses_form").serializeArray(),
       success: function(data)
       {
            $('#uses_form_div').load('#uses_form_div');

       }
     });
return false; });

Answer 1

i think you are having a misunderstanding..

if you want to load an external url into the div block

$('#uses_form_div').load("./a.file");

will do it. see the api docs.

Or if you are trying to load the ajax response of the $.ajax call into the div, it should be

$.ajax({
       type: 'POST',
       url: $(this).attr('action'),
       cache: false,
       data: $("#uses_form").serializeArray(),
       success: function(data)
       {
            $('#uses_form_div').html(data); // see here

       }
});

UPDATED according to comments below:

if the case of an included page to be refreshed. I have two ways to recommend.

1. make the included file as a separate url and load it initially. so instead of include you will be loading it via jquery as the page loads by a jquery load call. and when you want to refresh it you can do $('#uses_form_div').load("./a.file");

2. you can put it as include it self and when you need to update, make an ajx request get the data back. Here you have 2 choice. You can build the dom at server and give html as ajax response and simply $("#uses_form_div").html(data) or get the response as json and build your dom at client side and load it via same $("#uses_form_div").html(data).