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

Question

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"). change она отображается правильно.Кроме того, успех всегда возвращается пустым, когда я использую console.log и alert ()

Answer 1

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

1. Когда изменяется #selectfont, вы устанавливаете локальную переменную font, а не глобальную переменную, потому что вы повторно объявляете ее с помощью var font.Избавьтесь от ключевого слова var.

2. Вы устанавливаете 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);
        }
    });
});