下一个和上一个按钮中的 Json 数据答案

【问题标题】：Json data in a next and previous button下一个和上一个按钮中的 Json 数据
【发布时间】：2014-02-28 12:50:09
【问题描述】：

单击下一个和上一个按钮后，我必须使用 AJAX 调用来获取 Json 数据。 Json 数据应包含单击下一个或上一个后显示的博客内容。有什么建议我的功能应该是什么样子吗？到目前为止，我只有：

function getPrev() {
    $.ajax({
        type: "GET",
        url: "../Content/test.txt",
        dataType: "json"
    }).success(function (data) {
        $.each(data, function (key, val) {
            $('#blogcont').append(key+ val);
        });
        return false;
    });
}

而我的Json文件只是一个测试文件：

   {"one":"test1", "two":"test2", "three":"test3" }

对不起，我是初学者！！！！谢谢

【问题讨论】：

为此您可以使用jqGrid。它旨在以基于网格的结构显示数据，带有下一个和上一个按钮以及其他一些增强功能。
您能否详细解释一下您当前解决方案的问题是什么？函数 getPrev() 有效吗？有什么类型的问题？
Mathias，我需要做的是加载 test1，然后在按下下一个加载 test2 等之后。我正在获取数据，但都是一次。

标签： javascript jquery json

【解决方案1】：

您的 $.ajax() 语法不正确

function getPrev() {
    $.ajax({
        type: "GET",
        url: "../Content/test.txt",
        dataType: "json",
        success: function(data) {
            var content = "";
            $.each(data, function(key, val) {
                content += "<p>" + key + ":" + val + "</p>";
            });
            $('#blogcont').html(content);
        }
    });
    return false;
}

或

function getPrev() {
    $.ajax({
        type: "GET",
        url: "../Content/test.txt",
        dataType: "json"
    }).done(function(data) {
        var content = "";
        $.each(data, function(key, val) {
            content += "<p>" + key + ":" + val + "</p>";
        });
        $('#blogcont').html(content);
    });
    return false;
}

试试这个

function getPrev() {
    $.ajax({
        type: "GET",
        url: "../Content/test.txt",
        dataType: "json"
    }).done(function(data) {
        var content = "";
        $.each(data, function(key, val) {
            content += '<p>' + key + ':' + val + '</p>';
        });
        $('#blogcont').html(content)
                .find('p')
                .hide()
                .first().show();
        $('button.next').click(function() {
            $('#blogcont').find('p:visible')
                    .hide()
                    .next('p').show();
        });


    });
    return false;
}

【讨论】：

在追加之前清除内容可能很有用：$( "#blogcont" ).empty(); 在done() 的开头。
您好 Pranav，感谢您清除我的代码。正如我所说，这是一个初学者的帖子。您对如何解决我遇到的问题有什么建议吗？
我必须通过单击按钮 prev 和 next 分别在 html 中显示来自 json 的每个数据...
是的，我必须将每个数据 'one' 和 'test1' 放入 JS 对象数组中，这些对象将包含我需要的博客信息（显然它只是一个测试数据）。当我通过 AJAX 加载它时，我应该重新创建这个对象数组并显示第一个对象以及一个字段来跟踪它在 JS 数组中的索引位置。因此，当单击“下一步”时，我会增加它以显示数组的下一个对象。如果这样更清楚。这是我课程的一部分，我真的很努力。我不是程序员....谢谢
您可以使用多种方法来实现 done(function(data) { var content = ""; $.each(data, function(key, val) { content += '<p>' + key + ':' + val + '</p>'; }); $('#blogcont').html(content) .find('p') .hide() .first().show(); $('button.next').click(function() { $('#blogcont').find('p:visible') .hide() .next('p').show(); }); }); return false; }

【解决方案2】：

如何将 JSON 数据存储为变量，然后您可以在点击时使用索引访问该变量？

var jsonData;
$.ajax({
    type: "GET",
    url: "../Content/test.txt",
    dataType: "json",
    success: function (data) {
        jsonData= data;
    }
});

var clickIndex = 0;
$('.prev').click(function() {
    if(clickIndex > 0) {
        clickIndex -= 1;
    }
    get(clickIndex);
});
$('.next').click(function() {
    clickIndex++;

    get(clickIndex);
});

然后您的 get 函数将接受索引并找到 JSON 属性：

function get(i) {
    var item = jsonData[i];
}

请注意，您需要添加一个 if 语句来检查您是否已达到单击 .next 时的索引限制。此外，这对于测试 JSON 文件来说很好，但更好的解决方案是能够从返回 JSON 的 Web 服务中仅请求一个相关项目。

【讨论】：

嗨，Athms，我试图使用它，但看起来它没有获取 var。
变量返回为未定义吗？如果是这样，它可能超出范围。 msdn.microsoft.com/en-us/library/bzt2dkta(v=vs.94).aspx 很好地解释了这一点。如果你还在苦苦挣扎，你总是可以使用 window.jsonData 来设置一个全局变量——它永远不会超出范围！
您是否查看了开发者控制台的错误？您可能还需要将 .txt 文件更改为 .json 文件。
我正在使用 Visual Studio，不幸的是它不读取 json 文件。这只是我课程的一部分，我必须使用视觉工作室。我检查了控制台，没有错误。
如果您正在运行 IIS 来加载网页，这可能会有所帮助：stackoverflow.com/questions/19516829/…