缺乏对Javascript功能的理解

Question

我有一个通用的MVC aspnetcore设置，它从本地数据库中提取数据，该数据库中包含所有美国邮政编码，它们所关联的州和城市。我试图撤回建议后说3个数字被置于他们应该推断的状态，然后在文本框中放置5位数后填写缺失的城市。令我困惑的问题是，在javascript函数中数据有返回的信息。但是，一旦示波器离开函数并且还试图将另一个文本框的值设置为任何该信息失败，该信息就会丢失。

我的看法

@section Scripts{
     <script src="Scripts/jquery-1.5.min.js" type="text/javascript"></script>
     <script src="~/js/data.js" type="text/javascript"></script>
}
<div class="form-group">
    <label asp-for="Zip" class="col-xs-2 control-label"></label>
    <div class="col-xs-6">
        <input id="Zip" asp-for="Zip" class="form-control" onkeyup="loadData()"/>
        <span asp-validation-for="Zip" class="text-danger" />
    </div>
</div>

我的javascript文件

function loadData() {
     var str = $("#Zip").val();
     if (str.length == 3){
        $.get("/Localities/OnChange", { id: str }, function (data) {
            $("#Code").val(data.code);
        });
    }
    if (str.length == 5) {
        $.get("/Localities/OnChange", { id: str }, function (data) {
            $("#Boroughs").val(data.boroughs);
            $("#City").val(data.city);
            $("#Code").val(data.code);
            $("#Country").val(data.country);
            $("#County").val(data.county);
            var temp = data.city;
        });
    }
}

我的控制器

 [HttpGet]
    public Localities OnChange(string id)
    {
        Localities temp = _context.Localities.FirstOrDefault(x => x.Zip.StartsWith(id));
        var temp2 = JsonConvert.SerializeObject(temp);
        return temp;
    }

Answer 1

这里几乎没有潜在的问题：

1）在这里的代码：

function loadData() {
     var str = $("#Zip").val();
     if (str.length == 3){
        $.get("/Localities/OnChange", { id: str }, function (data) {
            $("#Code").val(data.code);
        });
    }
    if (str.length == 5) {
        $.get("/Localities/OnChange", { id: str }, function (data) {
            $("#Boroughs").val(data.boroughs);
            $("#City").val(data.city);
            $("#Code").val(data.code);
            $("#Country").val(data.country);
            $("#County").val(data.county);
            var temp = data.city;
        });
    }
}

第二个GET中的var temp只能在现在的函数中使用。

第二个很可能是因为它很可能是你的代码没有显示数据的原因

data.data.city和data.data.code等

如果你做console.log(data);我很确定它嵌套在另一个数据包装器中。

让我知道我会将函数变量更改为函数（响应），因此您会被您所处的水平混淆。

这应该工作或者至少可以让你更好地了解什么是坏的：

var temp; // Global

function loadData() {
         var str = $("#Zip").val();
         if (str.length == 3){
            $.get("/Localities/OnChange", { id: str }, function (response) {
                $("#Code").val(response.data.code);
            });
        }
        if (str.length == 5) {
            $.get("/Localities/OnChange", { id: str }, function (response) {
                $("#Boroughs").val(response.data.boroughs);
                $("#City").val(response.data.city);
                $("#Code").val(response.data.code);
                $("#Country").val(response.data.country);
                $("#County").val(response.data.county);
                temp = response.data.city;
            });
        }
    }

还要检查控制台是否存在可能阻止代码执行的任何其他错误。

检查一下：

右键单击元素并获取ID

<input type="text" id="#city">

此ID可能与您在渲染后期望的不同