Question

我有一个Web API，它返回以下JSOn： -

{'url': 'http://192.168.10.50/WCF/00vf/img?imgid=1', 'desc': 'firstdoc'},{'url': 'http://192.168.10.50/WCF/vf/img?imgid=2', 'desc': 'sedonddoc'},{'url': 'http://192.168.10.50/WCF/vf/img?imgid=3', 'desc': 'thirddoc'}

所以我需要根据返回的JSON构建<a>链接，我试着写下面的jquery但它没有用完： -

<script type="text/javascript">
$(function() {
    $.getJSON("http://localhost:1431/home/statisjson",
  {

    datetype: "json"
  },
  function(data) {
      $.each(data, function (key, val) {
      $("<a/>").attr("href", val.url).appendTo("#links");

    });
  });
})
</script>
<div id="links"></div>

仍然需要添加'desc'JSON对象作为链接文本，我无法弄清楚如何做到这一点？

BR

:: UPDATE :: 我已将我的脚本更新为以下内容但它不起作用： -

@section scripts {
 <script type="text/javascript">
     $(document).ready(function () {



         $.ajax({
             type: "GET",
             url: 'http://localhost:1431/Home/statisjson',
             dataType: "JSON",

             success: function (result) {

                 $.each(result, function (key, val) {


                     $("<a>", { href: val.url, text: val.desc }).appendTo("#links");


                 });
             }
         });


     });

 </script>

返回JSON的asp.net方法如下： -

public ActionResult statisjson(int start = 0, int rows = 50)
        {
 var j = "[{'url': 'http://192.168.10.50/img?imgid=1', 'desc': 'firstdoc'},{'url': 'http://192.168.10.50/img?imgid=2', 'desc': 'sedonddoc'},{'url': 'http://192.168.10.50/img?imgid=3', 'desc': 'thirddoc'}]"; 
return Content(j, "application/json");

        }

Answer 1

当传递HTML作为第一个参数时，您可以传递包含属性的对象文字作为第二个参数：

$("<a>", { href: val.url, text: val.desc }).appendTo("#links");

Answer 2

尝试使用：

$("<a>" + val.desc + "</a>").attr("href", val.url).appendTo("#links");

Answer 3

这不是有效的JSON。您需要添加[]。

[{'url': 'http://192.168.10.50/WCF/00vf/img?imgid=1', 'desc': 'firstdoc'},{'url': 'http://192.168.10.50/WCF/vf/img?imgid=2', 'desc': 'sedonddoc'},{'url': 'http://192.168.10.50/WCF/vf/img?imgid=3', 'desc': 'thirddoc'}]

你应该尝试这样来创建你的链接：

$("<a/>").attr("href", val.url).text(val.desc).appendTo("#links");

如何使用jquery和JSON动态构建链接

3 个答案: