使用ajax和jquery完成工作后显示html [英] Show html after completing work with ajax and jquery
问题描述
代码是我要解释的.因此它还不完整.我写的正好足以解释我的问题.
codes below is that I made to explain. So it is not complete one. I wrote just enough to explain my question.
html加载->调用ajax-> json(response)->通过jquery用json附加表行
html load -> call ajax -> json(response) -> append table row with the json by jquery
每当我使用ajax并使用响应数据更新页面并使用jquery附加页面中的某些元素时，它就会显示在屏幕中非常快速地在jquery中一个接一个地添加的过程.
whenever I use ajax and update page with response data and append some elements in page with jquery, it shows process of appending one by one in jquery very quickly in screen.
1.在用jquery将for循环中的所有元素添加完成后，我是否可以立即显示所有表?
1.Can I have way to show all table at once when it is done appending all elements in for loop with jquery?
2.在我的示例代码中，它在文档第一次使用 $(document).ready()准备好之后就调用ajax.在表中显示数据的方式似乎很慢，因为它会在所有html页面加载后调用ajax，然后使用ajax响应更新html的某些部分.使用ajax是错误的方法吗?
2.In my example code, It calls ajax after document get ready with $(document).ready() at very first time. It seems quite slow way to show data in table because it call ajax after all html page loaded and then update some part of html with ajax response. Is it wrong way to use ajax???
<html>
<body>
I have to html syntax to show data list.
<table id="example">
<thread>
<th>order</th>
<th>title</th>
</thread>
<tbody>
</tbody>
</table>
<button onclick="javascript:loadajaxfunction(parameter to update)">Update</button>
</body>
<script>
$(document).ready(function() {
loadajaxfunction();
});
loadajaxfunction = function(parameter to update) {
$.ajax({
url:
type:
data:
success: function(json){
$tbody = $("#example").find('tbody')
$row = $('<tr>');
$.each(json.objects, function(key, value){
$col = $('td>');
$col.text(value);
$row.append($col);
}
$tbody.append($row);
}
});
</script>
</html>
推荐答案
-
您可以先隐藏表格，然后在收到响应后将其全部显示.像这样:
You can hide the table at first, and then show it all when we have the response. Like this:
<table id="example" style="visibility: hidden"> <!-- Change here -->
<thread>
<th>order</th>
<th>title</th>
</thread>
<tbody>
</tbody>
</table>
在JS中:
loadajaxfunction = function(parameter to update) {
$.ajax({
url:
type:
data:
success: function(json){
$tbody = $("#example").find('tbody')
$row = $('<tr>');
$.each(json.objects, function(key, value){
$col = $('td>');
$col.text(value);
$row.append($col);
}
$tbody.append($row);
$("#example").css('visibility', 'visible'); // <--- And here
}
});
使用Ajax的方式没有任何问题.如果您想更快地渲染表格，请尝试直接从服务器以HTML形式返回表格.
There is nothing wrong with the way you are using Ajax. If you want to render the table faster, try to return it directly in the HTML from server.
如果必须在客户端执行此操作，请先尝试构建整个表的HTML，然后再将其替换为< table> ，不要过多地访问DOM.通过逐行追加.
If you have to do it at client side, try to build the whole table's HTML first before replace it into the <table>, don't access to the DOM too much by appending row by row.
loadajaxfunction = function(parameter to update) {
$.ajax({
url:
type:
data:
success: function(json){
$tbody = $("#example").find('tbody')
$row = $('<tr>');
// Build html for cols
var cols = '';
$.each(json.objects, function(key, value){
cols += '<td>' + value + '</td>'
}
// Append it in all by once
$row.html(cols);
$tbody.append($row);
$("#example").css('visibility', 'visible');
}
});
这篇关于使用ajax和jquery完成工作后显示html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
