使用 AJAX 更新文本框答案

【问题标题】：Update textbox with AJAX使用 AJAX 更新文本框
【发布时间】：2017-07-06 16:38:23
【问题描述】：

当下拉列表的值发生变化时，我需要根据下拉列表的新值更改两个文本框的值，而不刷新页面。

这应该很容易，但我无法弄清楚是什么让 AJAX 运行。好像能取到值，但是无法设置文本框。

This 类似的问题对我没有帮助。 this 也没有。

JavaScript：

// Dropdown ID = PatientID, textbox ID = DoB
var patient = $("#PatientID");
patient.change(function () {
    var newDob;
    $.ajax({
        url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
        type: "GET",
        success: function (result) {
            // Displays correct result
            alert(result);
            newDob = result;
        },
        error: function (xhr, status, err) {
            alert(err);
        }
    });
    // Causes the box to become blank, HTML value attribute doesn't change
    $("#DoB").val(newDob);
});

控制器：

[HttpGet]
public string PatientDob(int patientId)
{
    return db.Patients.Find(patientId).DateOfBirth.ToString("MM/dd/yyyy");
}

【问题讨论】：

请求是异步的 - success 将在请求完成后的某个时间点运行，目前$("#DoB").val(newDob); 在此之前被调用。设置你当前alert()的值
@AlexK。我不认为我在我的生活中感到如此愚蠢。在有限的睡眠中跑步。我想我在前一个树桩的末尾有.val()，自动驾驶仪告诉我它需要在那里设置。
有一个ajax完成事件你也可以使用，api.jquery.com/ajaxcomplete
@JasonRoner 很高兴知道，谢谢。
您不应将答案与问题放在同一帖子中。您的答案与 ebraley 发布的代码相同.. 并且查看 ebraley 发布的内容更清晰，因为在答案部分。我已经删除了它，因为它在那里没有任何好处，而且它的位置只会让事情变得不太清楚。

标签： javascript c# jquery ajax asp.net-mvc

【解决方案1】：

$.ajax 调用是异步的，这意味着您的$("#DoB").val(newDob); 调用甚至在 AJAX 请求发出之前就已执行。更改需要在 AJAX 成功回调中完成。

// Dropdown ID = PatientID, textbox ID = DoB
var patient = $("#PatientID");
patient.change(function () {
    $.ajax({
        url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
        type: "GET",
        success: function (result) {
            $("#DoB").val(result);
        },
        error: function (xhr, status, err) {
            alert(err);
        }
    });

});

【讨论】：

不是第一个正确答案，但肯定是最清楚的。 Alex 在 cmets 的这两条战线上都赢了，但我想他不需要更多的名声了。

【解决方案2】：

尝试将 $("#DoB").val(result); 保留在成功函数中，看看它是否有效。

注意：$("#DoB").val(newDob);修改为 $("#DoB").val(result);

【讨论】：

我是个白痴。至少这可以作为我找不到的非常简单的 AJAX 请求的资源。

【解决方案3】：

问题在于 ajax 默认是异步的，因此代码示例中的 las 行可能在从服务器获取结果之前执行。您可以将 async: false 添加到您的 ajax 调用中，以便在执行下一个 javascript 步骤之前等待结果：

 $.ajax({
    url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
    async: false,
    type: "GET",
    success: function (result) {
        // Displays correct result
        alert(result);
        newDob = result;
    },
    error: function (xhr, status, err) {
        alert(err);
    }
});
$("#DoB").val(newDob);

或（最好）在调用的成功方法中设置文本字段（这不会在您等待服务器结果时阻止任何其他代码执行）：

 $.ajax({
    url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
    async: true,
    type: "GET",
    success: function (result) {
        // Displays correct result
        alert(result);
        newDob = result;
        $("#DoB").val(newDob);
    },
    error: function (xhr, status, err) {
        alert(err);
    }
});

【讨论】：

【解决方案4】：

尝试这样做。请检查文本框是纯 html 输入还是任何插件生成的文本框。如果是第二个，您必须检查插件以刷新新内容。

// Dropdown ID = PatientID, textbox ID = DoB
var patient = $("#PatientID");
patient.change(function () {
    var newDob;
    $.ajax({
        url: '@(Url.Action("PatientDob"))?patientId=' + patient.val(),
        type: "GET",
        success: function (result) {
            // Displays correct result
            $("#DoB").val(result);
        },
        error: function (xhr, status, err) {
            alert(err);
        }
    });
    // Causes the box to become blank, HTML value attribute doesn't change

});

【讨论】：