javascript - 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 没有改变，但是当我在 $( "#selectfont").change 它显示正确。此外，当我使用 console.log 和 alert() 时，成功总是返回空

Answer 1

你有两个问题:

1. 当 #selectfont 发生变化时，您设置的是局部变量 font，而不是全局变量，因为您使用 var 重新声明了它字体。去掉 var 关键字。

2. 您在页面首次加载时设置 htmldata。您需要在用户点击按钮时设置它，以便获得更新的值。

您根本不需要font 变量。你可以在设置htmldata时获取#selectfont的值。

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