首页 > 解决方案 > 如何更新 JSON 调用 URL onclick

问题描述

我需要 getJSON 调用将 URL 更新为通过单击按钮选择的选定名称,并获取与选择关联的数据。

它当前更新名称,但不从新 URL 获取新数据。

<a href="info.php?name=Name1" onclick="name1()">Name1</a>
<a href="info.php?name=Name2" onclick="name2()">Name2</a>
<a href="info.php?name=Name3" onclick="name3()">Name3</a>
let name_url = "name.com";

function name1() {
    name_url = "1.name.com";
};

function name2() {
    name_url = "2.name.com";
};

function name3() {
    name_url = "3.name.com";
};

$.getJSON('https://'+name_url+'/name-info?name-id=1&name=' + theName, function(data) {

        var loading = $('.loading');   
        var nameData = $('#nameResults'); 
        var avgBlockTime = (data['avg-block-time']/1000)

    $.ajaxSetup({
        async: true
    });

    $.ajaxSetup({
        async: false
    });

我希望不同的数据填充刷新的网页。

标签: javascriptjqueryhtmljson

解决方案


最简单的方法是使用 jQuery 事件侦听器并href在单击它时获取被单击的元素。

您已经在每个链接的 href 属性中设置了查询参数,因此可以非常简单地获取整个 url

HTML

<a class="ajax-link" href="info.php?name=Name1">Name1</a>
<a class="ajax-link" href="info.php?name=Name2">Name2</a>
<a class="ajax-link" href="info.php?name=Name3">Name3</a>

JS

$(function(){    
    $('.ajax-link').click(function(event){
       // prevent browser opening in new page
       event.preventDefault();
       // `this` is `<a>` instance and it has an `href` property that is full url needed
       $.getJSON( this.href, function(data) {
          // do stuff with response data
          ...
       });  
    });    
});

推荐阅读