Question

我想在HTML模板中打印唯一的state_name值。如何使用jQuery在模板中打印这些值？

$.ajax({
  type: 'GET',
  url: "http://localhost:8000/country_state/",
  data: {
    "country": selectedCountry
  },
  success: function(response) {
    alert('success');

    //I just print response using below  
    alert(response)
  },
  error: function(response) {
    alert("error");
  }
});

// response format:
[{
  "model": "demo.state",
  "pk": 1,
  "fields": {
    "state_name": "Gujarat",
    "country": 1
  }
}, {
  "model": "demo.state",
  "pk": 2,
  "fields": {
    "state_name": "Rajsthan",
    "country": 1
  }
}, {
  "model": "demo.state",
  "pk": 3,
  "fields": {
    "state_name": "Maharastra",
    "country": 1
  }
}]

Answer 1

在AJAX success处理程序中，您需要遍历返回数组中的对象，并拉出fields.state_name属性值。然后，您可以根据需要将其添加到DOM中的元素。在下面的示例中，我使用了append()：

success: function(response) {
  response.forEach(function(obj) {
    $('#yourOutputElement').append(obj.fields.state_name);
  });
},

Answer 2

最好的方法是循环对象，抓取项目，然后根据需要使用数组var，这是一个小示例：

success: function(response) {
    alert('success');

    var myAr = [];

    response.forEach(respObj => { myAr.push(respObj.fields.state_name) })
  },

现在您有了myArr，其中包含所有state_name，如果您提供有关如何使用它们的更多信息，请附加我可以修改答案，加油

Answer 3

在您的体内放置此元素：

<div id="result"></div>

然后，您的脚本将是：

 $.ajax({
  type: 'GET',
  url: "http://localhost:8000/country_state/",
  data: {},
  success: function(data) {
      var target=$('#result');
      for(var i = 0; i < data.length; i++){
        var p='<p>'+data[i]['fields']['state_name']+'</p>'
        target.append(p)
      }
  }, error: function(data) {
    alert("error");
  }
});

如何将以JSON返回的对象的属性添加到模板中

3 个答案: