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

时间:2019-04-18 21:46:15

标签: javascript php jquery 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 正确显示。另外,当我使用console.log和alert()

时,成功总是返回空

1 个答案:

答案 0 :(得分: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);
        }
    });
});