Question

我正在使用jQuery的 getJson 来获取 Json对象，并希望在html页面上显示它。

我可以使用以下代码成功显示它们：

$.getJSON(full_name, {}, function(data) {

        $.each(data, function(index, field){
          $("div").append(index + " : " + field + "<br>");
        });
});

在json数据中，有一个带有索引的项目叫做'reference'。我想将其字段从简单文本更改为超链接。当我点击此链接时，它会向网址发送GET方法请求，并在新页面上显示从服务器获取的内容。

如何更改我的页面以实现此功能？

提前致谢。

Answer 1

尝试

$.getJSON(full_name, {}, function(data) {
    $.each(data, function(index, field){
        if(index == 'reference') {
            html = '<a href="link">' + field + "</a><br/>";
        } else {
            html = index + " : " + field + "<br>";
        }
        $("div").append(html);
    });
});

Answer 2

$.getJSON(full_name, {}, function(data) {

        $.each(data, function(index, field){
          if(index=='reference'){
          $("div").append('<a class="jMyLink">' + field + "</a><br/>");
          } else{
          $("div").append(index + " : " + field + "<br>");
          }
        });
});
$(".jMylink").on('click',function(){
  // Place your ajax call here
});

如果您不熟悉ajax的使用，可以参考here

Answer 3

$.getJSON(full_name, {}, function(data) {

    $.each(data, function(index, field){
        if(index == 'reference'){
            $("div").append('<a href="link" class="sendrequest">' + field + "</a><br/>");
        } else {
            $("div").append(index + " : " + field + "<br>");
        }
    });
});

然后通过锚标签发送请求点击

$(".sendrequest").on('click',function(){

// apply ajax here to send get request

 //send set state request
    $.ajax({
        type: "GET",
        url: "url name",
        data: {// your data
            },
        beforeSend: function () {
// handle before send request         
 },
        success: function (data, textStatus, XmlHttpRequest) {
// handle when request success        
},
        error: function (XMLHttpRequest, textStatus, errorThrown) {
// handle error
        }
    });


});

参考ajax

如何使用jQuery动态添加超链接？

3 个答案: