jquery ajax 对象不想存储变量

Question

我正在尝试使用 jquery ajax 将一些 json 数据存储在表中。 到目前为止，我可以手动将数据添加到 .json 文档中，并且内容会显示在表格中。但我试图通过在我的 html 文件中进行输入来实现这一点。我试图从输入文本中获取值到我的 js 文件中，但由于某种原因，该对象不会简单地存储变量。

我已经多次编辑了代码，但我迷路了。任何帮助表示赞赏。

$(function(){

    var $name = $("#name").val();
    var $age = $("#age").val();
    var $town = $("#town").val();
    var $aircraft = $("#aircraft").val();

    $.ajax({
        type: "GET",
        url: "../content/json/members.json",
        success: function(data) {
            flight = JSON.parse(data);
            var tr;
            for (var i = 0; i < flight.length; i++) {
                tr = $("<tr/>");
                tr.append("<td>" + flight[i].name + "</td>");
                tr.append("<td>" + flight[i].age + "</td>");
                tr.append("<td>" + flight[i].town + "</td>");
                tr.append("<td>" + flight[i].aircraft + "</td>");
                $(".members").append(tr);
            }
        }
    });

    $(".sendButton").on("click", function() {

        var postMember = {
            name: $name,
            age: $age,
            town: $town,
            aircraft: $aircraft,
        };

        $.ajax({
            type: "POST",   
            url: "../content/json/members.json",
            data: postMember,
            success: function(postMember) {
                addMember = JSON.parse(postMember);
                tr = $("<tr/>");
                //$.each(addMember, function(i, attribute) {
                tr.append("<td>" + addMember.name + "</td>");
                tr.append("<td>" + addMember.age + "</td>");
                tr.append("<td>" + addMember.town + "</td>");
                tr.append("<td>" + addMember.aircraft + "</td>");
                //});           
                $(".members").append(tr);
            }       
        });
    });
});

Answer 1

那是因为您在开始时捕获输入值，而不是在用户单击具有“.senButton”类的按钮时提交表单时。

你需要移动这个：

var $name = $("#name").val();
var $age = $("#age").val();
var $town = $("#town").val();
var $aircraft = $("#aircraft").val();

在“.sendButton”点击事件中，它捕获每个输入字段的当前值：

$(".sendButton").on("click", function() {
    var $name = $("#name").val();
    var $age = $("#age").val();
    var $town = $("#town").val();
    var $aircraft = $("#aircraft").val();

这会解决您的问题吗？