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

这会解决您的问题吗？

jquery ajax对象不想存储变量

1 个答案: