1

我正在尝试将 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>
4

1 回答 1

1

你有一个问题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);

    }
}
于 2013-08-01T10:17:58.100 回答