Зачем использовать функцию печати данных в консоли?

Question

Я создаю страницу на PHP, но когда я использую AJAX для отправки данных, функция echo начинает печатать данные в консоли вместо элементов DOM.

Я хочу добавить сканер штрих-кода Quagga на мою страницу. Quagga пишется на JS, но моя страница на php. Поэтому я должен использовать Ajax для отправки результата штрих-кода в мой php-код. И есть проблема. После отправки данных (POST) и использования echo для их отображения на экране все данные, которые должны отображаться эхом, отображаются в консоли. Не только данные, которые я отправляю, но и весь HTML-код страницы. Даже header('Location: ') не работает правильно. Потому что я посылаю прочитанный код в barcodereaded.php, где я помещаю POST-данные в SESSION var, и я пытаюсь отобразить это на экране в другом файле barcoderesult.php, но каждый раз, когда данные печатаются в консольном журнале в barcode.php ( какой код ниже). На любой другой подстранице функции php echo и header работают нормально, только этот случай вызывает проблемы.

<div id="scanner-container"></div>
<input type="button" id="btn" value="Start/Stop" />

<script src="js/quagga.min.js"></script>

<script>

    var _scannerIsRunning = false;

    function startScanner() {


        var barcode = {};
        Quagga.init({
            inputStream: {
                name: "Live",
                type: "LiveStream",
                numOfWorkers: navigator.hardwareConcurrency,
                target: document.querySelector('#scanner-container'),
                constraints: {
                    size: 1920,
                    width: 200,
                    height: 480,
                    facingMode: "environment"
                },
            },
            config: {
                frequency: 5,
            },
            locator: {
                patchSize: "x-large",
            },
            decoder: {
                readers: [
                    "code_128_reader",
                    "ean_reader",
                    "ean_8_reader",
                    "code_39_reader",
                    "code_39_vin_reader",
                    "codabar_reader",
                    "upc_reader",
                    "upc_e_reader",
                    "i2of5_reader"
                ],
                debug: {
                    showCanvas: true,
                    showPatches: true,
                    showFoundPatches: true,
                    showSkeleton: true,
                    showLabels: true,
                    showPatchLabels: true,
                    showRemainingPatchLabels: true,
                    boxFromPatches: {
                        showTransformed: true,
                        showTransformedBox: true,
                        showBB: true
                    }
                }
            },

        }, function (err) {
            if (err) {
                console.log(err);
                return
            }

            console.log("Initialization finished. Ready to start");
            Quagga.start();

            // Set flag to is running
            _scannerIsRunning = true;
        });

        Quagga.onProcessed(function (result) {
            var drawingCtx = Quagga.canvas.ctx.overlay,
            drawingCanvas = Quagga.canvas.dom.overlay;

            if (result) {
                if (result.boxes) {
                    drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
                    result.boxes.filter(function (box) {
                        return box !== result.box;
                    }).forEach(function (box) {
                        Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
                    });
                }

                if (result.box) {
                    Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
                }

                if (result.codeResult && result.codeResult.code) {
                    Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
                }
            }
        });


        Quagga.onDetected(function (result) {
            Quagga.stop();
            barcode.code = result.codeResult.code;
            $.ajax({
                url: "barcodereaded.php",
                method: "POST",
                data: barcode,
                success: function(res){
                    console.log(res);
                }

            });
        });
    }

    // Start/stop scanner
    document.getElementById("btn").addEventListener("click", function () {
        if (_scannerIsRunning) {
            Quagga.stop();
            _scannerIsRunning = false;
        } else {
            startScanner();
        }
    }, false);
</script>

Я просто хочу отправить прочитанный штрих-код в другой файл, чтобы преобразовать его в данные, которые я хочу добавить в базу данных (количество элементов на поддоне, дата изготовления и т. Д.)

Answer 1

Посмотрите на эту часть вашего кода:

$.ajax({
    url: "barcodereaded.php",
    method: "POST",
    data: barcode,
    success: function(res){
        console.log(res);
    }

});

Метод success сообщает, что делать с результатом вашего ajax-кода. И здесь вы специально говорите, чтобы записать ответ (res) на консоль.

Вместо этого вы можете использовать содержимое res, чтобы добавить его к своему домену с помощью предпочитаемого вами решения Javascript (vanilla, jQuery, ...).

С помощью jQuery вы можете (если результатом вашего php-кода является какой-то текст):

$('#my-return-container').text(res)