缺少对 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 可能与渲染后的预期不同