AJAX 适用于本地主机，但不适用于实时服务器

Question

下面的代码适用于本地主机，但不适用于实时服务器。

主要编辑：

只有一件事仍然不起作用：

在AJAX成功时，这将被执行：

$(".FixedDiv").addClass("panel-danger");
setTimeout(close, 500);
$("#label_" + res[2]).html(data.score_result);
$("#monitoring_score").html(data.calculated_score);

但是， label （例如）并未更新。 label需要根据给定的分数（data.score_result）进行更新。

阿贾克斯代码：

$('.rating').on('rating.change', function () {
  var rating_id = $(this).attr('id');
  var res = rating_id.split("_");

  var comment = $("#comments_" + res[2]).val();
  var score = $("#item_score_" + res[2]).val();

  var post = 'controller=QualityMonitoring&task=setScore&monitor_id='
    + <?php echo $query['monitor_id']; ?>
    + '&q=' + res[2] + '&item_score=' + score + '&comment=' + comment;

  $.ajax({
    url: "controller.php",
    type: "POST",
    data: post,
    cache: false,
    dataType: "json",
    beforeSend: function () {
      saveScore();
    },
    success: function (data) {
      $(".FixedDiv").addClass("panel-danger");
      setTimeout(close, 500);
      $("#label_" + res[2]).html(data.score_result);
      $("#monitoring_score").html(data.calculated_score);
    }
  });
});

当我把alert('test'); 在$.ajax({代码显示 'test' 的上方。当​​我将警报放入（正下方） $.ajax({代码，它不显示警报。

saveScore 函数：

function saveScore() {
  var docHeight = $(document).height();

  $("body").append("<div id='overlay'></div>");

  $("#overlay")
    .height(docHeight)
    .css({
      'opacity': 0.4,
      'position': 'absolute',
      'top': 0,
      'left': 0,
      'background-color': 'black',
      'width': '100%',
      'z-index': 5000
    });
}

结果/信息：

1. alert(post); 给我正确的数据结果。
2. saveScore被执行，但之后不会关闭（ setTimeout) 。
3. #label和#monitoring_score没有像它必须做的那样更新。
4. 使用jquery-3.1.1 。

我对如何解决这个问题感到心烦意乱。 任何人都知道如何解决？

额外：

@提姆：

也向 AJAX 调用添加一个错误处理程序，很可能是服务器端传递错误而不是数据。 或者从 DevTools 打开 Network 选项卡，看看你是否真的收到了 200 OK 消息和数据。

编辑1：（整个javascript代码）：

<script>
    $(document).ready(function () {
        $(".nav-tabs a").click(function () {
            $(this).tab('show');
        });
    });

    $(document).ready(function () {
        $('.summernote').summernote({
            height: 450,   //set editable area's height
            toolbar: [
                ['view', ['fullscreen']],
                ['help', ['help']]
            ],
            codemirror: { // codemirror options
                theme: 'monokai'
            }

        });
    });

    jQuery(document).ready(function () {

        $('.nvt').on('click', function () {
            // get the id:
            var id = $(this).attr('id');
            var res = id.split("_");

            // Reset rating:
            var rating_input = "item_score_" + res[1];
            $('#' + rating_input).rating('update', 0);

            var comment = $("#comments_" + res[1]).val();
            var score = 0;

            var post = 'controller=QualityMonitoring&task=setScore&monitor_id=' + <?php echo $query['monitor_id']; ?> +'&q=' + res[1] + '&item_score=' + score + '&comment=' + comment;

            $.ajax({
                url: "controller.php",
                type: "POST",
                data: post,
                cache: false,
                dataType: "json",
                beforeSend: function () {
                    saveScore();
                },
                success: function (data) {
                    $(".FixedDiv").addClass("panel-danger");
                    setTimeout(closediv, 500);
                    $("#label_" + res[1]).html(data.score_result);
                    $("#monitoring_score").html(data.calculated_score);
                },
                error: function (data) {
                    $(".FixedDiv").addClass("panel-danger");
                    setTimeout(closediv, 500);
                    $("#label_" + res[1]).html(data.score_result);
                    $("#monitoring_score").html(data.calculated_score);
                }
            });

        });

        $('.rating').on('rating.change', function () {
            var rating_id = $(this).attr('id');
            var res = rating_id.split("_");

            var comment = $("#comments_" + res[2]).val();
            var score = $("#item_score_" + res[2]).val();

            var post = 'controller=QualityMonitoring&task=setScore&monitor_id=' + <?php echo $query['monitor_id']; ?> +'&q=' + res[2] + '&item_score=' + score + '&comment=' + comment;

            $.ajax({
                url: "controller.php",
                type: "POST",
                data: post,
                cache: false,
                dataType: 'json',
                beforeSend: function (data) {
                    saveScore();
                },
                success: function (data) {
                    $(".FixedDiv").addClass("panel-danger");
                    setTimeout(closediv, 500);
                    $("#label_" + res[2]).html(data.score_result);
                    $("#monitoring_score").html(data.calculated_score);
                },
                error: function(data) {
                    console.log("ERROR: ", data);
                }
            });

        });

        $('.savecomment').on('blur', function () {
            var comment_id = $(this).attr('id');
            var res = comment_id.split("_");

            var commentraw = $("#comments_" + res[1]).val();
            var comment = encodeURIComponent(commentraw);

            var post = 'controller=QualityMonitoring&task=setComment&monitor_id=' + <?php echo $query['monitor_id']; ?> +'&q=' + res[1] + '&comment=' + comment;

            $.ajax({
                url: "controller.php",
                type: "POST",
                data: post,
                cache: false,
                dataType: "json",
                success: function (data) {
                    if (data.result == 666) {
                        $("#comments_" + res[1]).css("background-color", "#ffcccc");
                    }
                }
            });

        });
    });

    $(document).on('change', '.btn-file :file', function () {
        var input = $(this),
                numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
    });

    $(document).ready(function () {
        $('.btn-file :file').on('fileselect', function (event, numFiles, label) {

            var input = $(this).parents('.input-group').find(':text'),
                    log = numFiles > 1 ? numFiles + ' files selected' : label;

            if (input.length) {
                input.val(log);
            } else {
                if (log) alert(log);
            }

        });
    });

    function closediv() {
        $(document).unbind("keyup");
        $("#overlay").fadeOut("slow", function () {
            $("#overlay").remove();
            $(".FixedDiv").removeClass("panel-danger");
        });

    }

    function saveScore() {
        var docHeight = $(document).height();

        $("body").append("<div id='overlay'></div>");

        $("#overlay")
                .height(docHeight)
                .css({
                    'opacity': 0.4,
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'background-color': 'black',
                    'width': '100%',
                    'z-index': 5000
                });
    }

    $(document).ready(function () {
        var $sidebar = $(".FixedDiv"),
                $window = $(window),
                offset = $sidebar.offset(),
                topPadding = 55;

        $window.scroll(function () {
            if ($window.scrollTop() > offset.top) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                $sidebar.stop().animate({
                    marginTop: 24
                });
            }
        });
    });
</script>

Answer 1

1. 在函数 saveScore() 之后添加： var close = function() { $('#overlay').remove(); }; var close = function() { $('#overlay').remove(); };

2. success: function (data) {}后success: function (data) {}删除最后一个逗号

Answer 2

我认为其他一些海报是关于无效 JSON 的，

然而，我想补充一点，这是我喜欢为 JSON 做的事情

<?php
   ob_start(); //turn on output buffering

   //...other code


$debug = ob_get_clean();
$response['debug'] = $debug; //comment this when live in production

header('Content-type: application/json');

echo json_encode($response);

这样做是打开输出缓冲。 它捕获任何输出并缓冲它。 这包括警告、通知、回声和打印内容。 然后它将它作为调试填充到响应中并将其转发给客户端。

显然您不想在实时生产服务器上执行此操作，但您可以轻松地将其注释掉。 向客户端包含一些错误和堆栈跟踪信息可能是一个安全问题。 但出于调试目的，它工作得很好。

JSON 的问题在于，如果您在某处检查某物的值（打印它）或有任何通知，它会破坏您的 JSON。 例如

 printed content
 {"foo":"bar"}

因此，这完全消除了该问题（假设您在打印任何内容之前输出缓冲区），如下所示：

 {"foo":"bar", "debug":"printed content"}

现在你有了有效的 JSON，作为附带的好处，你可以通过简单地打印出你的调试信息

 $.ajax({
     url: "controller.php",
     type: "POST",
     data: post,
     cache: false,
     dataType: "json",
     beforeSend: function () {
       saveScore();
     },
     success: function (data) {
          if(data.debug) console.log(data.debug);
     }
 });

它简单而有效。

希望它有帮助。

Answer 3

您的 PHP 代码是否有效并且不会抛出导致 JSON 对象混乱的额外代码。 当有通知时，JSON 对象变为字符串而不是 JSON 字符串，然后 javascript 无法再解析它。

请制作一个没有任何其他代码的新控制器，再次发布数据，然后检查发生了什么。 永远不要返回数据，而是通过退出来回显数据。

Javascript 和代码看起来有效，但 MVC 中的其他地方可能会在退出语句中抛出 HTML 代码或在您进入返回数据所需的控制器之前生成它。

Answer 4

尝试向您的 Ajax 函数添加一个错误处理程序并查看它返回的内容：

$.ajax({
    url: "controller.php",
    type: "POST",
    data: post,
    cache: false,
    dataType: "json",
    beforeSend: function () {
      saveScore();
    },
    success: function (data) {
      $(".FixedDiv").addClass("panel-danger");
      setTimeout(close, 500);
      $("#label_" + res[2]).html(data.score_result);
      $("#monitoring_score").html(data.calculated_score);
    },
    error: function(data) {
      console.log("ERROR: ", data);
    }
  });

与我们分享结果，以便我们可以解决您的问题并为您提供帮助。

Answer 5

您是否将 js 代码包装在$(document).ready() 中？

在文档“准备好”之前，不能安全地操作页面。 jQuery 会为您检测这种准备状态。 $( document ).ready() 中包含的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。

尝试将所有内容都包含在

$(function(){
//your code here
})

像这样：

$(function(){
$('.rating').on('rating.change', function () {
  var rating_id = $(this).attr('id');
  var res = rating_id.split("_");

  var comment = $("#comments_" + res[2]).val();
  var score = $("#item_score_" + res[2]).val();

  var post = 'controller=QualityMonitoring&task=setScore&monitor_id='
    + <?php echo $query['monitor_id']; ?>
    + '&q=' + res[2] + '&item_score=' + score + '&comment=' + comment;

  $.ajax({
    url: "controller.php",
    type: "POST",
    data: post,
    cache: false,
    dataType: "json",
    beforeSend: function () {
      saveScore();
    },
    success: function (data) {
      $(".FixedDiv").addClass("panel-danger");
      setTimeout(close, 500);
      $("#label_" + res[2]).html(data.score_result);
      $("#monitoring_score").html(data.calculated_score);
    }
  });
});

function saveScore() {
  var docHeight = $(document).height();

  $("body").append("<div id='overlay'></div>");

  $("#overlay")
    .height(docHeight)
    .css({
      'opacity': 0.4,
      'position': 'absolute',
      'top': 0,
      'left': 0,
      'background-color': 'black',
      'width': '100%',
      'z-index': 5000
    });
}

});

Answer 6

从你发布的代码、下面的评论和讨论（实际上对跳到这个结论很有帮助）..我可以指出一些事情，但首先：

添加error_reporting(0); 在<?php之后的controller开始处应该可以解决您的问题。 （如果我的猜测是正确的，它只是一个通知，而不是一个实际的错误）

我猜你已经在你的localhost的php.ini和实时服务器上有了这个，你有默认的error_reporting = E_ALL ，由于php两个不同安装。

controller可能某处有未定义索引或其他内容的notice ，并且php试图通过输出以下内容来让您知道：

<br />
<b>Notice</b>:  Undefined index: ...
{"calculated_score":10,"score_result":"1.75 pts"}

它以<开头，这就是它的来源

SyntaxError: Unexpected token < in JSON at position 0 

$.ajax无法解析它，因为你有dataType="json"这意味着它期待从服务器json一个有效的json ，所以你得到200状态，因为请求成功并且没有错误和console.log(data)将是空的，因为它无法解析它。

重现此问题的一种简单方法是创建一个测试php文件并将请求发送给它，而不是像这样的controller.php ：

<?php
    error_reporting(0); // try with and without this line.

    $data = [
        'city' => 'Montreal',
        'Country' => 'Canada'
    ];

    echo $_GET['something']; // this will trigger a notice of undefined index something

    echo json_encode($data);
?>

您可以删除dataType:"json"并将console.log(data)放在success function然后在控制台中查看服务器真正告诉您的内容。

但这里有一些让我烦恼的东西..

var post = 'controller=QualityMonitoring&task=setScore&monitor_id='

这看起来像您用于GET请求的查询字符串，但您在ajax请求中type:"POST" ..

我不知道你是如何在controller处理这个的，但它应该是type:"GET"来发送这样的数据，但是如果你想用POST发送数据，那么var post应该是一个对象，（这可以是问题，因为它在未设置时默认为GET ，并且在控制器中有一个$_GET['task']而不是$_POST['task']或 vise-versa ）所以这里有一个将查询字符串转换为json的片段：

 function QueryStringToJSON(str) { var pairs = str.split('&'); var result = {}; pairs.forEach(function (pair) { pair = pair.split('='); var name = pair[0] var value = pair[1] if (name.length) if (result[name] !== undefined) { if (!result[name].push) { result[name] = [result[name]]; } result[name].push(value || ''); } else { result[name] = value || ''; } }); return (result); } var string = 'controller=QualityMonitoring&task=setScore&monitor_id=5&q=blah&item_score=99&comment=hello'; var obj = QueryStringToJSON(string); console.log(obj);

我希望这有助于或至少给你一个想法，祝​​你好运。