javascript - AJAX不发送所选选项的当前值

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不变，但是当我在$（“＃selectfont”）。change中使用alert（）函数时，它显示正确。另外，当我使用console.log和alert（）时，成功总是返回空

最佳答案

您有两个问题：


当#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);
        }
    });
});