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);

我希望這有助於或至少給你一個想法，祝​​你好運。