Попытка отправить переменные js в файл php

Question

Я пытаюсь отправить переменные js из моего файла js в другой файл php, когда пользователь нажимает «FINISH» на главной странице php. Вот мой код:

map.php

<form  action="./finalmap.php">
   <input class="finish-button" type="submit" value="FINISH" onclick="sendData();" />
</form>

map.js

function sendData() {
    $.ajax({
        method: "POST",
        url: "../finalmap.php",
        data: {
            selectedLoc: selectionArray, 
            startLoc: start,
            endLoc: end,
            dist: distance,
            locTypes: allLocations
        },
        beforeSend : function(http) { },
        success : function(response,status,http) {
            alert(response);
        },
        error : function(http,status,error) {
            $('.response').html("<span class='error'>Something went wrong</span>");
            $(".response").slideDown();
        }
    });
}

finalmap.php

<?php
    $data = $_POST['data'];
    echo $data;
?>

Запись прошла успешно, и я могу видеть содержимое (мой код) в моем файле finalmap.php из команды alert. Когда я пытаюсь открыть файл console.log $data в файле finalmap.php, он становится пустым / пустым.

Моя цель - отправить данные в finalmap.php и перенаправить на них.

Answer 1

Чтобы решить эту проблему, вы должны уменьшить количество тестируемого продукта до одной. Ваш код содержит ошибки и является неполным. Итак, давайте сначала начнем с ошибок: если вы используете AJAX, вы не хотите, чтобы HTML отправлял форму обычным способом. Если вы получили обновление страницы, ваш AJAX не работал.

<button type="button" id="submit-button">FINISH</button>

Примечание: <form> не требуется; вы отправляете через AJAX.

Далее, вы должны быть уверены, что ваша ajax-функция выполняется (поскольку вы используете $.ajax, я предполагаю, что вы загрузили JQuery):

<button type="button" id="submit-button">FINISH</button>
<script>

    // all listener functions need to wait until DOM is loaded
    $(document).ready(function() {

      // this is the same idea as your onclick="sendData();
      // but this separates the javascript from the html
      $('#submit-button').on('click', function() {
        console.log('hello world');
      });
    });
</script>

Вы используете свою веб-консоль, чтобы увидеть сообщение console.log.

Теперь попробуйте команду ajax с простым постом:

<button type="button" id="submit-button">FINISH</button>
<script>

    // all listener functions need to wait until DOM is loaded
    $(document).ready(function() {

      $('#submit-button').on('click', function() {
        $.ajax({
          method: "POST",
          // "./finalmap.php" or "../finalmap.php"?
          url: "../finalmap.php",
          data: {foo: 'bar'},
          success: function(response){ 
            console.log('response is: ');
            console.log(response);
          }
        });
      });
    });
</script>

finalmap.php

<?php echo 'This is finalmap.php'; 

Если после нажатия кнопки в веб-консоли вы увидите This is finalmap.php, вы можете попробовать отправить данные.

finalmap.php

<?php
    echo 'You sent the following data: ';
    print_r($_POST);

Видите, куда мы идем с этим? Способ съесть слона - один укус за раз.

Answer 2

. / Finalmap.php это не вещь.

Вместо этого код должен выглядеть так:

<form  action="/finalmap.php">
   <input class="finish-button" type="submit" value="FINISH" onclick="sendData();" />
</form>

Попробуйте использовать это вместо.

РЕДАКТИРОВАТЬ: К сожалению, я просто сдал и вставил.