使用 Javascript 在 Web 应用程序上自动填充输入框

Question

我正在开发一个 Web 应用程序，它应该使用 ajax 连接到数据库并具有基本的 CRUD 功能。除更新外，一切正常。在选择数据库条目时，我希望它使用 javascript 将现有数据预填充到输入框中。

    $(document).ready(function() {
    $.ajax({
        url : '/animal',
        method : 'GET'
    }).then(function(animals) {
        for (var i = 0; i < animals.length; i++) {
            var animal = animals[i];
            var row = '<option value="' + animal.animalId + '">'
                        + animal.commonName
                        + '</option>';
            $("#animals").append(row);  
        }
    });
    $.ajax({
        url : '/food',
        method : 'GET'
    }).then(function(foods) {
        for (var i = 0; i < foods.length; i++) {
            var food = foods[i];
            var row = '<option value="' + food.foodId + '">'
                        + food.foodName
                        + '</option>';
            $("#foods").append(row);
        }
    });

$("#animals").change(function() {
    $.ajax({
        url : '/animal/' + $("#animals").val(),
        method : 'GET'
    }).then(function(task) {
        console.log($("#animals").val());
        $("#cName").val(animals.commonName);
        $("#sName").val(animals.sciName);
        $("#food").val(animals.foodId);
        $("#infoLink").val(animals.infoLink);
        });
    });
$("#submit").click(function() {
    var animal = {};
    animals.commonName = $("#cName").val();
    animals.sciName = $("#sName").val();
    animals.foodId = $("#food").val();
    animals.infoLink = $("#infoLink").val();

    $.ajax({
        url : '/animal/' + animals.animalId,
        method : 'PUT',
        data : JSON.stringify(animal),
        contentType : 'application/JSON'
    }).then(function() {
        window.location.href = "/animal/index";
        });
    });
});

这是我目前的javascript，我不知道哪里出了问题。任何帮助表示赞赏。

Answer 1

我看到的几个问题：

var animal = {}; //You define "animal" here
animals.commonName = $("#cName").val(); //..but use "animals" here to populate the object
animals.sciName = $("#sName").val();
animals.foodId = $("#food").val();
animals.infoLink = $("#infoLink").val();

我建议：

var animal = {
    commonName: $("#cName").val(),
    sciName: $("#sName").val(),
    foodId: $("#food").val(),
    infoLink: $("#infoLink").val()
};

这里

then(function(task) { //Your result is named "task"
    console.log($("#animals").val());
    $("#cName").val(animals.commonName); //..but you try to use "animals" which is going to be undefined
    $("#sName").val(animals.sciName);
    $("#food").val(animals.foodId);
    $("#infoLink").val(animals.infoLink);
    });
});

并解决这个问题，要么将 task 更改为 animals，要么将两个变量名称更改为其他名称。

使用 Javascript 在 Web 应用程序上自动填充输入框

Auto Fill input boxes on web app using Javascript

javascript

ajax

crud