Остановить JS отправку данных через GET - PullRequest
Новая
       33

Остановить JS отправку данных через GET

0 голосов
/ 05 августа 2020

Я беру некоторые данные, используя AJAX, и использую эти данные для создания графика с помощью plotly. 

$(document).ready(function() {
    $("#graph").click(function(event) {
        $.ajax({
            method : "POST", type: "POST",
            url: 'db_fetch.php',
            data: datastring,
            dataType: "json",
            success: function(data) {
                $('#graph').append('<strong style="color:#000;">Successfully updated </strong>');
                data = JSON.stringify(data);

                Plotly.d3.json(data, function(err, rows) {
                 

                    function unpack(rows, key, condition=0, conditionvalue=0) {
                        if(condition ===0)
                         return rows.map(function(row) { return row[key]; });
                      else return rows.map(function(row) {if (row[condition]==conditionvalue) return row[key]; });
                    }


                    var trace1 = {
                        type: "scatter",
                        mode: "lines",
                        name: 'RELATIVE_VEHICLE',
                        x: unpack(rows, 'DATE', 'PRODUCER_ID', '6417386008'),
                        y: unpack(rows, 'RELATIVE_VEHICLE', 'PRODUCER_ID', '6417386008'),
                        line: {
                            color: '#17BECF'
                        }
                    }



                    var datat = [trace1];

                    var layout = {
                        title: 'Time Series',
                    };

                    Plotly.newPlot('myDiv', datat, layout);
                })




            },
            error: function(jqxhr, status, exception) {
                alert('Update failed. Exception:' + exception);
            }
        });
    });
});

Без использования AJAX код работает нормально, но когда я пытаюсь использовать данные полученный через AJAX для той же операции, я получаю

Не удалось загрузить ресурс: сервер ответил статусом 403 (Запрещено)

В частности, это потому, что URI слишком длинный

XHR GET http://localhost/test/ [% 7B% 22ID% 22:% 22240616% 22,% 22PRODUCER_ID% 22:% 2241440528% 22,% 22DATE% 22:% 222011-10 -19% 22,% 22TIME% 22:% 2210: 18% 22,% 22MONTH% 22:% 2210% 22,% 22QUARTER% 22 [...]

Ну это странно, Я вообще не использую GET с запросом AJAX, и поскольку я использую POST, проблема с слишком длинным URI не должна быть проблемой.

Глядя на трассировку стека, мы получаем: 

jquery-3.3.1.js:9600 XHR finished loading: POST "http://localhost/test/db_fetch.php".
send @ jquery-3.3.1.js:9600
ajax @ jquery-3.3.1.js:9206
(anonymous) @ index.php:75
dispatch @ jquery-3.3.1.js:5183
elemData.handle @ jquery-3.3.1.js:4991
plotly.min.js:20 GET http://localhost/test/[%7B%22ID%22:%22240616%22,%22PRODUCER_ID%22:%2241440528%22,%22DATE%22:%222011-10-19%22,%22TIME%22:%2210:18%22,%22MONTH%22:%2210%22,%22QUARTER%22:%222011Q4%22,%22LOCATION%22:%22DETROIT%22,%22CARS%22:%2267%22,%22QUANTITY%22:%22871%22,%22VEHICLE%22:%2275.74%22,%22RELATIVE_VEHICLE%22:%220.087%22%7D,%7B%22ID%22:%22243358%22,%22PRODUCER_ID%22:%2241440528%22,%22DATE%22:%222011-10-22%22,%22TIME%22:%2208:41%22,%22MONTH%22:%2210%22,%22QUARTER%22:%222011Q4%22,%22LOCATION%22:%22DETROIT%22,%22CARS%22:%2267%22,%22QUANTITY%22:%22627%22,%22VEHICLE%22:%2282.564%22,%22RELATIVE_VEHICLE%22:%220.132%22%7D,%7B%22ID%22:%22245850%22,%22PRODUCER_ID%22:%2241440528%22,%22DATE%22:%222011-10-25%22,%22TIME%22:%2208:48%22,%22MONTH%22:%2210%22,%22QUARTER%22:%222011Q4%22,%22LOCATION%22:%22DETROIT%22,%22CARS%22:%2267%22,%22QUANTITY%22:%22931%22,%22VEHICLE%22:%22108.051%22,%22RELATIVE_VEHICLE%22:%220.116%22%7D] 403 (Forbidden)
o.send @ plotly.min.js:20
forEach.o.<computed> @ plotly.min.js:20
me @ plotly.min.js:20
t.json @ plotly.min.js:20
success @ index.php:86
fire @ jquery-3.3.1.js:3268
fireWith @ jquery-3.3.1.js:3398
done @ jquery-3.3.1.js:9305
(anonymous) @ jquery-3.3.1.js:9548
load (async)
send @ jquery-3.3.1.js:9567
ajax @ jquery-3.3.1.js:9206
(anonymous) @ index.php:75
dispatch @ jquery-3.3.1.js:5183
elemData.handle @ jquery-3.3.1.js:4991
index.php:94 Uncaught TypeError: Cannot read property 'map' of undefined
    at unpack (index.php:94)
    at Object.<anonymous> (index.php:105)
    at Object.n (plotly.min.js:20)
    at XMLHttpRequest.h (plotly.min.js:20)
unpack @ index.php:94
(anonymous) @ index.php:105
n @ plotly.min.js:20
h @ plotly.min.js:20
load (async)
me @ plotly.min.js:20
t.json @ plotly.min.js:20
success @ index.php:86
fire @ jquery-3.3.1.js:3268
fireWith @ jquery-3.3.1.js:3398
done @ jquery-3.3.1.js:9305
(anonymous) @ jquery-3.3.1.js:9548
load (async)
send @ jquery-3.3.1.js:9567
ajax @ jquery-3.3.1.js:9206
(anonymous) @ index.php:75
dispatch @ jquery-3.3.1.js:5183
elemData.handle @ jquery-3.3.1.js:4991
plotly.min.js:20 XHR failed loading: GET "http://localhost/test/[%7B%22ID%22:%22240616%22,%22PRODUCER_ID%22:%2241440528%22,%22DATE%22:%222011-10-19%22,%22TIME%22:%2210:18%22,%22MONTH%22:%2210%22,%22QUARTER%22:%222011Q4%22,%22LOCATION%22:%22DETROIT%22,%22CARS%22:%2267%22,%22QUANTITY%22:%22871%22,%22VEHICLE%22:%2275.74%22,%22RELATIVE_VEHICLE%22:%220.087%22%7D,%7B%22ID%22:%22243358%22,%22PRODUCER_ID%22:%2241440528%22,%22DATE%22:%222011-10-22%22,%22TIME%22:%2208:41%22,%22MONTH%22:%2210%22,%22QUARTER%22:%222011Q4%22,%22LOCATION%22:%22DETROIT%22,%22CARS%22:%2267%22,%22QUANTITY%22:%22627%22,%22VEHICLE%22:%2282.564%22,%22RELATIVE_VEHICLE%22:%220.132%22%7D,%7B%22ID%22:%22245850%22,%22PRODUCER_ID%22:%2241440528%22,%22DATE%22:%222011-10-25%22,%22TIME%22:%2208:48%22,%22MONTH%22:%2210%22,%22QUARTER%22:%222011Q4%22,%22LOCATION%22:%22DETROIT%22,%22CARS%22:%2267%22,%22QUANTITY%22:%22931%22,%22VEHICLE%22:%22108.051%22,%22RELATIVE_VEHICLE%22:%220.116%22%7D]".
o.send @ plotly.min.js:20
forEach.o.<computed> @ plotly.min.js:20
me @ plotly.min.js:20
t.json @ plotly.min.js:20
success @ index.php:86
fire @ jquery-3.3.1.js:3268
fireWith @ jquery-3.3.1.js:3398
done @ jquery-3.3.1.js:9305
(anonymous) @ jquery-3.3.1.js:9548
load (async)
send @ jquery-3.3.1.js:9567
ajax @ jquery-3.3.1.js:9206
(anonymous) @ index.php:75
dispatch @ jquery-3.3.1.js:5183
elemData.handle @ jquery-3.3.1.js:4991

Итак, вся информация отправляется на plotpy.min. js через GET, что, кажется, является проблемой? Если отправка POST-сообщения решит проблему, как мне go добиться этого?

...