#javascript #html
#javascript #HTML
Вопрос:
Это мой код скрипта, где я получу список массивов, затем я повторил и получил каждое значение в переменной. Теперь мое требование — показать эти значения на моей 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 = "amp;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> Комментарии:
1. Я не вижу фрагмента кода, который генерирует HTML. Вы просто повторяете значения, которые поступают из ajax-запроса. Где это, где вы создаете элементы DOM?
2. Чувак, если твоя главная цель — отправить значения javascript в представление и даже изменить его динамически, не прикасаясь к DOM, а только изменив исходное значение на новое, тогда тебе ДЕЙСТВИТЕЛЬНО стоит взглянуть на AngularJS, это одна из его главных целей, даже если он может сделать гораздо больше, это очень классный фреймворк (ты также можешь взглянуть на ReactJS, но я думаю, тебе следует начать с Angular) вот * допустимая ссылка: angularjs.org
Ответ №1:
не тестировался, но должен работать с использованием innerHTML для записи списка в brands ul
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;
document.getElementById("brands").innerHTML = '<li class="item" >
<a href="" class="badge-live" data-badge="LIVE" ></a>
<a href=""><div class="offer">
<span class="link-overlay"></span>
<img src="' imageUrl '" id="imageurl">
<div class="offer-info">
<h6 id="brandname">' brandName '</h6>
<p class="offer-short" id="description">' description '</p>
<p class="funded">
<span class="goal">
<strong id="totalgoal">$' 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">%' 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>';
}
},
//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 = "amp;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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small-12 columns" onload="getValueFromServer()">
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3" id="brands">
</ul>
</div> Комментарии:
1. рад это слышать