javascript - Javascript - 用AJAX更新文本框

80 0

当下拉列表更改时,根据下拉列表的新值,更改两个文本框的值而不刷新页面。

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


}



时间: 原作者:

109 5

$.ajax调用是异步的,这意味着在发出AJAX请求之前,你的$("#DoB").val(newDob);调用正在执行,更改需要在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);


 }


 });



});



原作者:
136 5

尽量保持$("#DoB").val(result);放到在success函数内部,看它是否有效。

注:$("#DoB").val(newDob);被修改为$("#DoB").val(result);

原作者:
79 1

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


 $.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);


 }


});



原作者:
...