使用 jquery/ajax 刷新/重新加载 Div 中的内容

小开

What you want is to load the data again but not reload the div.

You need to make an Ajax query to get data from the server and fill the DIV.

http://api.jquery.com/jQuery.ajax/

小开

While you haven't provided enough information to actually indicate WHERE you should be pulling data from, you do need to pull it from somewhere. You can specify the URL in load, as well as define data parameters or a callback function.

$("#getCameraSerialNumbers").click(function () {
$("#step1Content").load('YourUrl');
});

http://api.jquery.com/load/

小开

最佳答案

I always use this, works perfect.

$(document).ready(function(){
$(function(){
$('#ideal_form').submit(function(e){
e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$('#loader3', form).html('<img src="../../images/ajax-loader.gif" />       Please wait...');
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(msg) {
$(form).fadeOut(800, function(){
form.html(msg).fadeIn().delay(2000);


});
}
});
});
});
});

小开

$("#myDiv").load(location.href+" #myDiv>*","");

小开

$("#mydiv").load(location.href + " #mydiv");

Always take note of the space just before the second # sign, otherwise the above code will return the whole page nested inside you intended DIV. Always put space.

小开

Try this

html code

 <div id="refresh">
<input type="text" />
<input type="button" id="click" />
</div>

jQuery code

 <script>
$('#click').click(function(){
var div=$('#refresh').html();
$.ajax({
url: '/path/to/file.php',
type: 'POST',
dataType: 'json',
data: {param1: 'value1'},
})
.done(function(data) {
if(data.success=='ok'){
$('#refresh').html(div);
}else{
// show errors.
}
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
});


</script>

php page code path=/path/to/file.php

<?php
header('Content-Type: application/json');
$done=true;
if($done){
echo json_encode(['success'=>'ok']);
}
?>

小开

When this method executes, it retrieves the content of location.href, but then jQuery parses the returned document to find the element with divId. This element, along with its contents, is inserted into the element with an ID (divId) of result, and the rest of the retrieved document is discarded.

$("#divId").load(location.href + " #divId>*", "");

hope this may help someone to understand

小开

You need to add the source from where you're loading the data.

For Example:

$("#step1Content").load("yourpage.html");

Hope It will help you.

小开

I know the topic is old, but you can declare the Ajax as a variable, then use a function to call the variable on the desired content. Keep in mind you are calling what you have in the Ajax if you want a different elements from the Ajax you need to specify it.

Example:

Var infogen = $.ajax({'your query')};


$("#refresh").click(function(){
infogen;
console.log("to verify");
});

Hope helps

if not try:

$("#refresh").click(function(){
loca.tion.reload();
console.log("to verify");
});

小开

$(document).ready(function() {
var pageRefresh = 5000; //5 s
setInterval(function() {
refresh();
}, pageRefresh);
});


// Functions


function refresh() {
$('#div1').load(location.href + " #div1");
$('#div2').load(location.href + " #div2");
}

小开

   $("#categoryTable").load(window.location + " #categoryTable");

Here i mentioned Table Id where i loading data and after delete. i am calling this code and it will refresh data without whole Page load.

小开

What I did was something like this:

$('#x').html($('#x').html())