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

我有一个页面，每当状态发生变化时，我都会在其中发布Ajax帖子。我想更新模型以反映新的变化。例如，如果州从AZ改为NY，我想把州改为NY，学生的名字改为Jenny。但是，该表格尚未更新。我做错了什么

历史记录：以前，我将信息保存在数据库中，每次有人访问该页面时，我都要多次调用数据库。然后，我将它切换到会话变量，在这里我必须创建几个变量并维护这些变量。我正在寻找更好的方法。我认为，至少在我看来，写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  });
  }     

@model School.Models.newstudent
@{
ViewBag.Title=“新生”；
}
函数changeState（）{
var Students=$（“#NewStudent”）.serialize（）；
$.ajax({
url:'@url.Action（“SetNewStudents”，“Student”），
键入：“POST”，
数据类型：'json'，
资料来源：学生，
cache:false，
//contentType:'应用程序/文本；字符集=UTF-8'，
成功：职能（e）{
//这里是我用新的NewStudents对象更新表单的地方。
$（'NewStudent'）.html（e.NewStudents）；
}
@使用（Html.BeginForm（“SetNewStudents”，“Student”，FormMethod.Post，new{id=“NewStudent”}））
{
@Html.ValidationSummary（true）
@LabelFor（model=>model.FirstName，“FirstName:”）


@EditorFor（model=>model.FirstName）
@Html.ValidationMessageFor（model=>model.FirstName）
@DropDownList（“Name”，null，“Choose State”，new{onchange=“changeState（）”}）
}   
[HttpPost]
公共JsonResult集新闻学生（新闻学生新闻学生）
{
NewStudents.FirstName=“Jenny”//我现在将名字改为Jenny。但是，表单没有更新以显示Jenny。
返回Json（新的{success=true，NewStudents=NewStudents}）；
}     

更新：我更改了方法以返回JSON结果，而不是视图

这是URL编码的请求： FirstName=sdfsd&Name=15

这是JSON响应：

---

返回结果：{“ok”：true，“NewStudent”：{“FirstName”：“Jenny”，“StateID”：15}

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

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

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

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

---

e.NewStudents包含哪些内容？尝试将

console.log（e.NewStudents）

添加到Ajax

success（）

方法中。此外，启动Chrome/Firefox/.console，查看Ajax请求是否实际返回

2xx

代码。否则，

success（）

方法将不会被调用。您需要序列化表单并从操作中返回JSON对象。有关一些方法，请参阅本文：我查看了e.NewStudents，它是一个对象。我这样做是因为在一个状态中有多个位置。例如，如果您选择NY，您将在您选择的位置填充另一个下拉列表ave选择位置。使用Ajax post，我不会丢失用户在表单中键入的任何值。此外，我没有创建会话变量或将该信息保存在数据库中。它是持久的。