Question

我不知道如何编写成功函数来编写下面的html。

我猜我需要使用for循环并填充json中返回的每条记录

我的js

<script>
    function UpdateStatus(){
            $.ajax({
                type:"GET",
                url:"/get_records/",
                data: {
                    product:"test",
                },
                success: function(data){
                    console.log(data);
                }
            });
        }
    }
</script>

我要填充的html：

<div class="editview-product-box">
    <H3>record</H3>
    <div class="editview-radio-box">
        {% for record in records %}
        <input type="radio" name="{{ record }}" /> {{ record }}
        <br /> {% endfor %}
    </div>
</div>

当前的js有效，因为我可以在chrome dev网络面板中看到api响应 - 但由于某些原因我无法获得任何记录到控制台的内容，不知道为什么。

Answer 1

在ajax成功之后，您需要将html附加到所选元素/选择器。这是一个有效的例子。

＆＃13;

$.ajax({
    type: "GET",
    url: "https://jsonplaceholder.typicode.com/todos",
    data: {
        product: "test",
    },
    success: function(data) {
        onSuccess(data);
    }
});

function onSuccess(data) {
  let html = "";
  $.each(data, function(k, v){
    html += `<input type="radio" name="${v.id}" /> ${ v.title }<br />`
  })
  $('.editview-radio-box').html(html);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="editview-product-box">
    <H3>record</H3>
    <div class="editview-radio-box">
    </div>
</div>

＆＃13;

Answer 2

假设twig模板是从后端获取的，没有值，但是在ajax调用中使用了表达式。

如果上面给出的代码是twig模板，那么应该从后端彻底渲染，变量不能从javascript中生成html中的值。

如何在Ajax上成功填充html？

2 个答案: