我试图将html元素动态添加到div中,但我根本无法这样做。我用var s='<a href='+hrf+'><img src='+hrf+'alt="Tulips"></a>';
替换了var s = '<button>click</button>';
只是为了检查我要附加的字符串是否有问题并且仍然没有运气。
头文字
<script type="text/javascript">
window.onload = GetRecords();
function GetRecords() {
$.ajax({
type: "POST",
url: "Gallery.aspx/insertimg",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var count = parseInt(xml.find("imgtable").length);
var imageTable = xml.find("imgtable");
for (var i = 0; i < count; i++) {
var hrf = imageTable.find("ImageUrl").eq(i).text();
var s='<a href='+hrf+'><img src='+hrf+'alt="Tulips"></a>';
$('.html5gallery').append(s);
}
}
</script>
身体
<body>
<div style="display:none; flex-align:center" class="html5gallery" data-skin="horizontal" data-width="480" data-height="272">
</div>
</body>
XML格式
<NewDataSet>
<imgtable>
<PhotoId>4</PhotoId>
<Name>Photo4</Name>
<ImageUrl>photoalbum/DSCN5798.jpg</ImageUrl>
<AlbumId>2</AlbumId>
<Date>2013-04-03T17:03:02+05:30</Date>
</imgtable>
<imgtable>
<PhotoId>5</PhotoId>
<Name>Photo5</Name>
<ImageUrl>photoalbum/DSCN5799.jpg</ImageUrl>
<AlbumId>2</AlbumId>
<Date>2013-04-03T17:03:13+05:30</Date>
</imgtable>
<imgtable>
<PhotoId>6</PhotoId>
<Name>Photo6</Name>
<ImageUrl>photoalbum/DSCN5800.jpg</ImageUrl>
<AlbumId>2</AlbumId>
<Date>2013-04-03T17:03:13+05:30</Date>
</imgtable>
</NewDataSet>
呈现的HTML
<body>
<form method="post" action="gallery.aspx?albumid=2" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="5WcBQJLHmIC4X/c0os4kFsh4tUCcOP93YgL5uIChec+tPgpqBaWkU5jZaSmvwM4MMGjdK8G9LD+/HV8GvINckwe5HGGXFcY7BgEpkFo0CEM=" />
</div>
<div style="display:none; flex-align:center" class="html5gallery" data-skin="horizontal" data-width="480" data-height="272"></div>
</form>
</body>
最佳答案
您在window.onload = GetRecords();
中有问题-应该是window.onload = GetRecords;
。
同样在ajax请求中,您说的响应是json
,但在成功回调中,它被处理为XML
但在jQuery中,您也可以使用dom ready来实现相同的功能
jQuery(GetRecords)
使用
window.onload = GetRecords();
时,将执行GetRecords
并将返回的值分配为onload
处理程序,这不是必需的。所需的是在加载窗口后调用GetRecords
,因为您需要使用window.onload
将函数引用传递给window.onload = GetRecords;
尝试
jQuery(GetRecords)
function GetRecords() {
$.ajax({
type : "POST",
url : "Gallery.aspx/insertimg",
contentType : "application/json; charset=utf-8",
dataType : "xml",
success : OnSuccess,
failure : function(response) {
alert(response.d);
},
error : function(response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var count = parseInt(xml.find("imgtable").length);
var imageTable = xml.find("imgtable");
for (var i = 0; i < count; i++) {
var hrf = imageTable.find("ImageUrl").eq(i).text();
var s = '<a href=' + hrf + '><img src=' + hrf + 'alt="Tulips"></a>';
$('.html5gallery').append(s);
}
}