即使字符串看起来不错，ajax 成功也不起作用

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 写入文档中。）这个数据看起来像这样（根据我的 google chrome 浏览器）：

var data = [

{
    "username":"momo",

    "profilepic": "momo_1.jpg",

    "caption":"",

    "likes": "0",
},

{
    "username":"momo",

    "profilepic": "momo_1.jpg",

    "caption":"",

    "likes": "0",
},

...

];

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

VM5454:2 Uncaught SyntaxError: Unexpected token 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？

json2html.transform @ json2html.js:33 文件中的Unexpected token 错误表明 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）& 它在右括号前有一个逗号，应该将其删除。然后在字符串上运行 JSON.parse()，将其转换为对象。

Unexpected token o ...然后代码正在尝试在有效的 JSON 对象上运行 JSON.parse()。要修复它，请删除 JSON.parse() 方法。