ajax動態拼接html代碼是一種常見的前端技術,它通過異步請求服務器數據,并將數據與html代碼結合起來,覆蓋原有的代碼,實現動態更新頁面。
$.ajax({ url: "http://example.com", method: "GET", dataType: "json", success: function(data) { var html = ""; for(var i = 0; i < data.length; i++) { html += "<div class='item'>"; html += "<h2>" + data[i].title + "</h2>"; html += "<p>" + data[i].description + "</p>"; html += "</div>"; } $("#container").html(html); }, error: function(error) { console.log(error); } });
上述代碼是一個常見的ajax動態拼接html代碼的例子。首先,通過$.ajax()方法異步請求服務器數據,并在成功回調函數中將數據與html代碼結合起來。這里使用了一個for循環,遍歷請求到的數據,拼接出每個item的html代碼。
其中,循環體中的代碼是嵌套在字符串中的。需要用到一些轉義符號,將字符串插入到HTML中,
<div class='item'> <h2>" + data[i].title + "</h2>"; <p>" + data[i].description + "</p> </div>
最后,將拼接好的代碼覆蓋$("#container")元素的html內容,實現動態更新頁面。