javascript - Ajax 调用成功后更新客户端信息

Question

我有一个页面，每当状态更改时我都会执行 Ajax Post。我想更新模型以反射(reflect)新的更改。例如，如果州从 AZ 更改为 NY，我想将州更改为 NY，将学生的名字更改为 Jenny。但是，该表格并未更新。我做错了什么？

历史记录:以前，我将信息保存在数据库中，每次有人访问该页面时，我都必须多次调用数据库。然后，我将其切换到 session 变量，我必须在其中创建多个变量并维护这些变量。我正在寻找更好的方法来做到这一点。我认为进行 Ajax 发布并能够在成功发布后更新表单会更加清晰，至少在我看来是这样。

这是我的代码示例:

@model School.Models.NewStudents

@{
    ViewBag.Title = "New Students";
}

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
   function changeState() {
      var Students= $('#NewStudent').serialize();
        $.ajax({
            url: '@Url.Action("SetNewStudents", "Student")',
             type: 'POST',
             datatype:'json',
             data: Students,
             cache: false,
             // contentType: 'application/text;charset=UTF-8',
             success: function (e) {
             //Here is where I am updating the form with the new NewStudents Object.
                  $('#NewStudent').html(e.NewStudents); 
             }
</script>



@using (Html.BeginForm("SetNewStudents", "Student", FormMethod.Post, new {id = "NewStudent" }))
{
     @Html.ValidationSummary(true)
    @Html.LabelFor(model => model.FirstName, "FirstName:")
            <br/>
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
    @Html.DropDownList("Name", null, "Choose State", new {  onchange = "changeState()" })
 }   



 [HttpPost]
 public JsonResult SetNewStudents(NewStudents NewStudents)
  {
     NewStudents.FirstName = "Jenny"; //I changed the first name To Jenny now. However, the form is not updated to show Jenny.
     return Json(new { success =true, NewStudents = NewStudents  });
  }     

更新:我更改了返回 JSON 结果而不是 View 的方法。

这是 URL 编码的请求:名字=sdfsd&Name=15

这是 JSON 响应:返回结果:{"ok":true,"NewStudent":{"FirstName":"Jenny", "StateID":15}}

Answer 1

在 AJAX 成功函数中，您返回的是 JSON，而不是 html，因此此行不起作用

$('#NewStudent').html(e.NewStudents);

例如，您需要提取值然后更新每个元素

success: function (e) {
  $('#FirstName').val(e.NewStudent.FirstName);
  $('#StateID').val(e.NewStudent.StateID);
}