Question

我有一个div，标识为#id1，其中包含链接。每当我点击链接时，我都会进行一次AJAX调用，这也会从服务器返回其他链接。

现在我正在做的是使用JQuery #id1方法用replaceWith()中的新链接替换旧链接。通过这样做，我保留了id div #id1。

我在这里要实现的是通过点击div上#id1的{{1}}新连接的链接，从服务器获取另一堆链接。

是否可以编写类似的脚本？

<div id = "id1">
<ul>
<li><a href ="test/show/1">link1</a></li>
<li><a href ="test/show/2">link1</a>link2</li>
....
</ul>
</div>
 <script> 
  $('#id1 a').on(click, function(){
     $.ajax({
            url: '/test/test_now?page=' + page,
            dataType: 'json',
            success: function(response) {
                   $('#id1').repalceWith(response.links);
            },
            error: function() {

                alert('An error occurred');
            }
        });</pre>

Answer 1

正如Pointy所说，我认为你需要更具体，但我认为这是一个模板工作，我最喜欢的一个（小尺寸）是Template7。

您可以在html脚下的脚本标记中创建模板：

<script id="template" type="text/template7">
  <ul>
    {{#each links}}
    <li>
      <a href="{{url}}">{{text}}</a>
    </li>
    {{/each}}
  </ul>
</script>

然后使用jQuery或JS

var template = $('#template').html();

// compile it with Template7
var compiledTemplate = Template7.compile(template);

// Now we may render our compiled template by passing required context
var context = {
    links:[
        {text:'Text',url:'http://www.example.com'}
    ]
};

var html = compiledTemplate(context);
$('#id1').html( html );

您可以从任何地方包含上下文，每次收到新链接时，只需更新上下文并重用已编译的模板，然后在“＃id1”div中再次替换html 只是不要忘记在你的html中包含Template7的js脚本文件

此致

是否可以将javascript注入使用ajax调用后加载的dom？

1 个答案: