Question

如果用户滚动到接近底部，则应在ajax请求的帮助下加载更多内容。这个ajax请求返回一些数据（作为一个json对象形式的字符串 - 所以它不是一个json对象，但只需要解析为一个）。进一步实际使用插件（JSON2HTML），它在模板迭代json对象后生成html。

JSON（在ajax之前）：

var template = {"tag":"div","class":"parent","children":[
{"tag":"div","class":"tablee","style":"cursor:/*pointer*/;","children":[
    {"tag":"table","class":"post","children":[
        {"tag":"tbody","children":[
            {"tag":"tr","children":[
                {"tag":"td","class":"postby","children":[
                    {"tag":"img","class":"postppic","src":"propic\/${profilepic}","html":""}
                  ]},
                {"tag":"td","class":"postcontent","children":[
                    {"tag":"p","class":"postusername","children":[
                        {"tag":"a","class":"poster","href":"${username}-profile.php","html":"${username}"},
                        {"tag":"br/"},
                        {"tag":"span","class":"caption","html":"${caption}"}
                    ]}
                ]},
                ...

var data = [

    {
        "username":"momo",

        "profilepic": "momo_1.jpg",

        "caption":"", 

        "likes": "0",
    },

    {
        "username":"momo",

        "profilepic": "momo_1.jpg",

        "caption":"", 

        "likes": "0",
    },

    ...

];

var str = json2html.transform(data,template);

$("#rein").append(str);

现在如果用户向下滚动更多应该被加载，形成像json对象的字符串现在由php回应我们已经在文档中发送的帖子数量（所以我们没有得到相同的帖子再次...）。

jQuery（当几乎达到底线时ajax请求）：

$(document).ready(function () {
    function loadMore()
    {
        var accountpar = $(".parent").length;
        $("h1").text(accountpar);
        $.ajax({
            url: 'homemore.php',
            type: 'post',
            data: {
                'account':accountpar
            },
            success: function(json) {
                var str = json2html.transform(json,template);
                $(str).insertAfter($('[class="parent"]').last());
                $("#rein").append();
                homejs();
            }
        });
        $(window).bind('scroll', bindScroll);
    }

    function bindScroll(){
        if($(window).scrollTop() + $(window).height() > $(document).height() - 75) {
            $(window).unbind('scroll');
            loadMore();
        }
    }

    $(window).scroll(bindScroll);
});

这种方法很有效，直到达到成功并且应该收到数据。（homejs（）是在document.ready之后加载的jquery函数，所以在文档中写入了第一个jquery。）这个数据看起来像那样（根据我的谷歌浏览器浏览器）：

var data = [

{
    "username":"momo",

    "profilepic": "momo_1.jpg",

    "caption":"",

    "likes": "0",
},

{
    "username":"momo",

    "profilepic": "momo_1.jpg",

    "caption":"",

    "likes": "0",
},

...

];

所以收到了一些东西却无法解析？因为这是控制台日志所说的（是这样的吗？就像你可以看到所有错误......）：

VM5454：2未捕获的SyntaxError：意外的令牌v


json2html.transform @ json2html.js：33

//Normalize strings to JSON objects if necessary
var obj = typeof json === 'string' ? JSON.parse(json) : json; //line 33

$ .ajax.success @ home.php：423

var str = json2html.transform(datanew,template); //line 423

j @ jquery-1.11.3.min.js：2

k.fireWith @ jquery-1.11.3.min.js：2

x @ jquery-1.11.3.min.js：5

b @ jquery-1.11.3.min.js：5

你们中的任何人都可以找出它为什么不起作用吗？我希望我提供了足够的信息......请帮忙：']

Answer 1

您可以用此替换您的ajax以查看您的回复

var accountpar = $(".parent").length;          
var data = {account:accountpar} ; 
  console.log('data',data);
 $.ajax({ 
        url: 'homemore.php',
        data: data ,
        type: 'post',
        dataType: "json",
        success: function(response) {
                  console.log(response);
         },
        error: function(jqXHR, exception) {
               if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
                } else if (jqXHR.status == 404) {
                    alert('Requested page not found. [404]');
                } else if (jqXHR.status == 500) {
                    alert('Internal Server Error [500].');
                } else if (exception === 'parsererror') {
                    alert('Requested JSON parse failed.');
                } else if (exception === 'timeout') {
                    alert('Time out error.');
                } else if (exception === 'abort') {
                    alert('Ajax request aborted.');
                } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
                }
         }
  });

Answer 2

您是否尝试通过http://www.jslint.com运行所有JSON以查看它是否是有效的JSON？

Unexpected token文件中的json2html.transform @ json2html.js:33错误表明JSON对象中存在某些问题。（我们没有办法检查它们，因为上面的所有3个例子都有省略号。）

或者通过JSON.parse（）方法在成功函数中传递json怎么样？请参阅此页面的答案： I keep getting "Uncaught SyntaxError: Unexpected token o"

更新： 以下是jsfiddle供您试用。（在小提琴中滚动到JS的最底部。）

<强> HTML：

<div id="output1"></div>
<div id="output2"></div>

JavaScript示例1 - 使用字符串化JSON：

如果您的PHP文件将其输出为字符串，则必须在其上运行JSON.parse。

var json = '[{"username": "momo", "profilepic": "momo_1.jpg", "caption": "", "likes": "0"}]';

var HTML = json2html.transform(JSON.parse(json),template);
$('#output1').html(HTML);

JavaScript示例2 - 使用JSON：

如果您的PHP文件输出此JSON格式，那么您不需要JSON.parse方法。

var json = [{"username": "momo", "profilepic": "momo_1.jpg", "caption": "", "likes": "0"}];

var HTML = json2html.transform(json,template);
$('#output2').html(HTML);

您必须查看您的网络服务器正在输出的内容。

如果你看到这些错误......

Unexpected token ] ...然后代码使用字符串（不是像例1中的JSON）＆amp;它在结束括号之前有一个逗号，应该删除它。然后在字符串上运行JSON.parse（），将其转换为对象。

Unexpected token o ...然后代码试图在有效的JSON对象上运行JSON.parse（）。要解决此问题，请删除JSON.parse（）方法。

即使字符串看起来很好，ajax成功也无法工作

2 个答案: