Question

下面的代码适用于localhost，但不适用于实时服务器。

主编辑：

只剩下一件不起作用的东西：

在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）进行更新。

Ajax代码：

$('.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'。当我将警报INSIDE（正好在下面）$.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
    });
}

结果/信息：

alert(post);为我提供了正确的数据结果。
saveScore已执行，但之后不会关闭（setTimeout)。
#label和#monitoring_score未按此更新。
使用jquery-3.1.1。

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

附加

@Teemu：

也为AJAX调用添加了错误处理程序，很可能就是这样服务器端传递错误而不是数据。或打开网络选项卡来自DevTools，看看你是否真的收到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

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

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和Code看起来有效但MVC中的其他地方可能会在退出语句中抛出HTML代码，或者在您进入返回数据所需的控制器之前生成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

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

在文档准备好之前，页面无法安全操作。＆＃34; 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);之后的controller开头添加<?php可以解决您的问题。（如果我的猜测是正确的，它只是一个通知，而不是一个实际的错误）

我猜你已经在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，因此您获得了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次请求的查询字符串，但您的type:"POST"请求中有ajax ..

我不知道你是如何在controller中处理这个问题的，但是应该type:"GET"发送这样的数据，但是如果你想用{发送数据' {1}}然后POST应该是一个对象（这可能是问题，因为它未设置时默认为var post，而在控制器中有GET而不是$_GET['task'] {1}}或反之亦然）所以这里是一个将查询字符串转换为$_POST['task']的代码段：

＆＃13;

json

＆＃13;

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

AJAX适用于localhost，但不适用于实时服务器

6 个答案: