Jquery refreshing multiple variables
I am having a very hard time finding a good re开发者_Python百科sources or any idea on how to accomplish the following:
Using jquery get some data
- Use jquery to fetch some data. Now what syntax should the data be in. Go to step 2.
- Again using jquery, assign that data to multiple variables and tags on the html page. I know how to replace 1 tag. But I wanna refresh multiple divs, tags, ids. Go to step 3.
- Now go back to step 1 after some time.
I have tried my friend GOOGLE but it can't find the pages that I am looking for. I would really appreciate some code here but a link to a tutorial wouldn't be too bad either.
1) $.ajax()
seems like a good idea, use it to fetch data in the JSON-format:
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback //Assign data and stuff here
});
2) Do that in the success
-parameter, as a new function. success: function() {}
success: function() {
$('div#1').html('foo');
$('h1#1').html('woo');
}
3) Wrap your $.ajax()
-call in an interval:
var refresh = setInterval(function()
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback //Assign data and stuff here
});
}, 60000);
Edit (response to the comment below):
Try doing it the following way, as you're not usin a function() as a callback:
function() {
$.ajax({
url: "/admin/ajax/all_data.php",
dataType: 'json',
data: data,
success: function(data) {
$("#testdiv1").html(data.testdiv1);
//$("#testdiv2").html(data.testdiv2);
//$("#testdiv3").html(data.testdiv3);
}
});
}), 2000);
Let me know if this works out for you.
1 - See $.ajax
and associated high level wrappers such as $.get
, $.post
, $.load
and $.getJSON
.
2 - If your server sends JSON to the client and the client understands how to use it, this is trivial. e.g.:
// json from server
{ "newsDiv" : "some html", "imagesDiv", "some html" }
// assuming it is stored in the variable 'data'
$("#newsDiv").html(data.newsDiv);
$("#imagesDiv").html(data.imagesDiv");
3 - setInterval
is your friend.
Then check out the jquery 'load' function here. With this, you can load data from a server and place it into the matched html element. Very clean and simple. Then, have a look at how to implement a timer here
I can't see what more you will need
精彩评论