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

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_类型和content_font_大小没有改变，但当我使用$selectfont.change中的alert函数时，它会正确显示。另外，当我使用console.log和alert时，success总是返回空值。您有两个问题：

当selectfont更改时，您设置的是局部变量font，而不是全局变量，因为您使用var font重新声明它。去掉var关键字

当页面第一次加载时，您正在设置htmldata。您需要在用户单击按钮时进行设置，以便获得更新的值

您根本不需要字体变量。在设置htmldata时，可以获得selectfont的值

---

你检查过文件权限了吗。yu是否测试过单独运行php并看到任何错误？并且可以尝试为数据指定不同的var名称！您应该能够从“开发人员工具”的“网络”选项卡中调试它。检查ajax的请求和响应。@zod，我已经尝试了您提到的所有内容，但仍然没有working@James，请求和回复对我来说似乎很好，这对我真的很有帮助，谢谢你，这样的解释真的帮助我理解这个问题

$(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);
        }
    });
});
});

$("#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);
        }
    });
});