Отправка формы с использованием метода ajax get для получения ответа с использованием XMLhttpreq - PullRequest
0 голосов
/ 03 апреля 2020

У меня есть такая форма, что пользователь выбирает значения из двух выпадающих меню. Опции выбора выбираются из файла js и являются списком курсов валют. Я уже создал код, который должен дать мне результат. Но когда я console.log ничего не показывает, но правильные данные отображаются (отражены) в файле php. Право получить также отображается в URL. Я предполагаю, что где-то в части JS что-то не так, и я не могу понять это, я уже рассмотрел другие примеры, но все они jquery.

HTML:

<!DOCTYPE html>
<html lang="sv">
<head>
<title>something</title>
<meta charset="utf-8">
<script src='plotly.min.js'></script>
    <script type="text/javascript">
    function loadDoc() {
    var e = document.getElementById("searchlan");
    var from = e.options[e.selectedIndex].value;

    var e1 = document.getElementById("searchlan1");
    var to = e1.options[e1.selectedIndex].value;

        var xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function()
        {
            if (this.readyState == 4 && this.status == 200)
            {
                console.log(JSON.parse(this.responseText));
            }
        };

        xhttp.open("GET", "server.php?from="+from+"&to="+to, true);
        xhttp.send();
    }
</script>

</head>
<body>
        <div id="info">

        <h2>Exchange rate</h2>
        <form>
        <p>
        <select id="searchlan" name="from"></select>
        <p>

        <p>
        <select id="searchlan1" name="to"></select>
        <p>

        <button onclick="loadDoc()" > show graph </button>
        </p>
        </form>
    <div id="chartContainer"></div>

</div>
    <script src="test.js"></script>
</body>

</html>

PHP:

require_once('index.php');

if(isset($_GET['from']) && isset($_GET['to'])){
    //here i bring data from server using curl, it works fine and echoes the data
    $curl = curl_init();

    //this is the response variable
    $obj= json_decode($response);

    //i structure data

   //Here i make it ready to be used in js

    $data = [ [
        "x" => $x,
        "y" => $y,
        "type" => "scatter"  
    ] ];

    $out = json_encode( $data ); 
    echo "{$out}";

Ответы [ 2 ]

1 голос
/ 03 апреля 2020
<button onclick="loadDoc()" > show graph </button>

Когда нажата кнопка отправки, запускается функция loadDoc, но до получения ответа Ajax форма отправляется и загружается новая страница.

Новая страница не включает обработчик событий, ожидающий ответа Ajax.


Не используйте кнопку отправки. Добавить type="button".

0 голосов
/ 03 апреля 2020

Я решил это с помощью Квентина. Вы, ребята, можете использовать этот код, но не забудьте удалить все html, которые у вас есть после вашего php кода. это вызывает эту ошибку

Uncaught SyntaxError: строка 23 Неожиданный токен

, если вы это получите, удалите все ваши html или все, что у вас есть после того, как вы отправите данные, которые хотите отправить на JS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...