【发布时间】：2016-10-20 13:43:06
【问题描述】：
这是我的脚本代码，我将在其中获得一个数组列表，然后我已经迭代并将每一个都放入一个变量中。现在我的要求是在我设计的 html 页面中显示这些值。我必须在我的页面中加载重试值。 imageurl 应该在 img src 中给出以显示该图像。另外，这应该是动态递增的。
<script>
function getValueFromServer(e) {
//make the AJAX request to server
$.ajax({
type: "GET",
url: "http://example./../getAllBrandList",
dataType: "json",
//if received a response from the server
success: function( data) {
console.log(data);
var brands=data;
var i = 0
//our country code was correct so we have some information to display
for ( var i = 0; i < brands.allBrands.length; i++) {
var obj = brands.allBrands[i];
console.log(obj);
var fundedType= "LIVE";
var url=obj.url;
var imageUrl=obj.image_url;
var brandName=obj.brandName;
var description=obj.description;
var totalGoal=obj.total_goal;
var totalRaised=obj.total_raised;
var profitMargin=obj.profit_margin;
}
},
//If there was no resonse from the server
error: function(jqXHR, textStatus, errorThrown){
console.log("Something really bad happened " + textStatus);
$("#ajaxResponse").html(jqXHR.responseText);
},
//capture the request before it was sent to server
beforeSend: function(jqXHR, settings){
//adding some Dummy data to the request
settings.data += "&dummyData=whatever";
//disable the button until we get the response
$('#myButton').attr("disabled", true);
},
//this is called after the response or error functions are finsihed
//so that we can take some action
complete: function(jqXHR, textStatus){
//enable the button
$('#myButton').attr("disabled", false);
}
});
};
window.onload = getValueFromServer();
</script><div class="small-12 columns" onload="getValueFromServer()">
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3" id="brands">
<!-- <li class="item" >
<a href="" class="badge-live" data-badge="LIVE" ></a>
<a href=""><div class="offer">
<span class="link-overlay"></span>
<img src="" id="imageurl">
<div class="offer-info">
<h6 id="brandname"></h6>
<p class="offer-short" id="description"></p>
<p class="funded">
<span class="goal">
<strong id="totalgoal">$</strong> raised 1 day ago in 13 minutes
</span>
</p>
<div class="nice round progress"><span class="meter-reserved" style="width: 100%;"></span><span class="meter" style="width: 100%;"></span></div>
<div class="row offer-stats">
<div class="small-12 columns text-center">
<p>
<span id="profitmargin">%</span> Co-Op Profit Margin
</p>
</div>
</div>
<hr style="margin:0.5rem 0 1rem;">
<div class="row text-center offer-stats">
<div class="small-6 columns">
<p>
<span>96</span>following
</p>
</div>
<div class="small-6 columns" style="border-left: 1px solid #dbdbdb;">
<p>
<span>4</span>Months
</p>
</div>
</div></a>
<div class="text-center">
<a href="http://localhost/sample/signup.html" class="button radius offers-button color:black">GET STARTED</a>
</div>
</div>
</div>
</li> -->
</ul>
</div>【问题讨论】：
-
我没有看到生成 HTML 的代码。您只是在迭代来自 ajax 请求的值。它在哪里，你在哪里创建 DOM 元素？
-
老兄，如果您的主要目标是将 javascript 值发送到视图，甚至在无需接触 DOM 的情况下进行动态更改，而只需更改新值的原始值，那么您应该真的看看 AngularJS，这是它的主要目的之一，即使他能做的远不止这些，这是一个非常酷的框架（你也可以看看 ReactJS，但我认为你应该从 Angular 开始）这里是*有效链接：angularjs.org
标签： javascript html