AJAX не отправляет текущее значение выбранной опции

#javascript #php #jquery #ajax

#javascript #php #jquery ( jquery ) #аякс

Вопрос:

php-код

 <?php
if(isset($_POST['data'])) {
$file_handle = fopen('my_file.json', 'w');
fwrite($file_handle, json_encode($_POST['data']));
fclose($file_handle);
}
?>

HTML

 <h1 id="title" class="text-lg-center text-md-center text-sm-left mb-4">test 
title</h1>
<p class="lead text-lg-center text-md-center text-sm-left mb-4">test 
content</p>
<button id="test" type="button" class="btn btn-lg btn-block btn-outline- 
success">Publish List</button>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="selectfont">
</select>
</div>

javascript

 $(function () {
var font = 0;
var font_names = ["Montez","Lobster","Josefin Sans"];

$.each(font_names , function (index , value) {
    $('<option />' , {
        'value' : index,
        'text' : value
    })
    .css({'font-family' : font_names[index]})
    .appendTo("#selectfont");
});

$("#selectfont").change(function () {
    var font = $(this).val();
    $("p").css('font-family' , font_names[font]);
});

var htmldata = {
    'content_font_type': font_names[font],
    'content_font_size': parseFloat($("title").css('font-size'))
    };

$("#test").click( function(){
    $.ajax({
        method: "POST",
        url: "test.php",
        data: {data: htmldata},
        success: function(data) {
            alert(data);
        }
    });
});
});

итак, что я хочу спросить, так это почему в my_file.json content_font_type и content_font_size не меняются, но когда я использую функцию alert() в $(«#selectfont»).измените его, чтобы он отображался правильно. Кроме того, успех всегда возвращает пустое значение, когда я использую консоль.журнал и оповещение ()

1. проверял ли вы разрешение файла. проверял ли вы, чтобы запустить только php и увидеть какую-либо ошибку? и может попробовать указать другое имя переменной для данных!

2. Вы должны иметь возможность отлаживать это с помощью инструментов разработчика, вкладка сеть. Проверьте запрос и ответ на ваш ajax там.

3. @zod, я уже пробовал все, что вы упомянули, но все еще не работает

4. @Джеймс, запрос и ответ кажутся мне хорошими

Ответ №1:

У вас две проблемы:

При #selectfont изменениях вы устанавливаете локальную переменную font , а не глобальную переменную, потому что вы повторно объявляете ее с var font помощью . Избавьтесь от var ключевого слова.
Вы устанавливаете htmldata , когда страница загружается в первый раз. Вам нужно установить его, когда пользователь нажимает на кнопку, чтобы вы получали обновленные значения.

На самом деле вам вообще не нужна font переменная. Вы можете получить значение #selectfont при настройке htmldata .

 
$("#test").click( function(){
    var htmldata = {
        'content_font_type': font_names[$("#selectfont").val()],
        'content_font_size': parseFloat($("title").css('font-size'))
    };
    $.ajax({
        method: "POST",
        url: "test.php",
        data: {data: htmldata},
        success: function(data) {
            alert(data);
        }
    });
});