數據沒有在窗體上顯示AJAX成功

我想在一個基於StudentId輸入的文本框中顯示學生姓名的簡單任務。我能夠將學生姓名顯示爲來自jQuery - AJAX調用的警報，但不能在文本框中顯示，我在這裏丟失了什麼？數據沒有在窗體上顯示AJAX成功

控制器：

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)] 
    public ActionResult DisplayStudentName(string id) 
    { 
     StudentDataContext db = new StudentDataContext(); 
     var StudentName = (from p in db.vwStudents.Where(a => a.StudentNumber == id) 
         group p by p.StudentName into g 
         select g.Key).FirstOrDefault(); 

     return Json(new { Name = StudentName }); 

    }

的jQuery：

$(function() { 
    $('#submitButton').click(function() { 
     var link = '/StudentForm/DisplayStudentName';   
     $.ajax({ 
      type: 'POST', 
      url: link, 
      data: { id: $('#id').val() }, 
      dataType: 'json', 
      success: function (result) { 
       $("#StudentName").val(result.Name); 
       alert(result.Name); 
      }, 
      error: function (result) { 
       alert("Failed") 
      } 
     }); 
    }); 
});

查看：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Student Form 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<div id="Data" style="text-align: left; height: 202px;"> 
Student Number:<input type="text" name="id" id="id"/><br />     
Student Name:<input type="text" name="StudentName" id="StudentName"/><br />    
<br /> 
<div id="Div1"> 
    <button id="submitButton" name="submitButton" style="width:140px;">Display Short Name</button> 
</div> 
</div> 

</asp:Content>

同樣，我能夠在Alert窗口中顯示學生姓名，但不是在文本盒子，我錯過了什麼？

在此先感謝

來源

2012-07-02 user793468

您需要防止提交按鈕的默認行爲。您可以使用jQuery的preventDefault功能要做到這一點，

$(function() { 
    $('#submitButton').click(function (e) { 
     e.preventDefault(); //prevent default behaviour 
     var link = '/StudentForm/DisplayStudentName';   
     $.ajax({ 
      type: 'POST', 
      url: link, 
      data: { id: $('#id').val() }, 
      dataType: 'json', 
      success: function (result) {     
       $("#StudentName").val(result.Name); 
      }, 
      error: function (result) { 
       alert("Failed") 
      } 
     }); 
    }); 
})

當preventDefault方法被調用時，事件的默認動作不會被觸發。所以在這種情況下，表單提交不會發生（所以頁面不會被重新加載）。

來源

2012-07-02 17:25:56 Shyju

它的工作！你能告訴我什麼是preventDefault（）回調嗎？ – user793468

@ user793468：它可以防止默認行爲（在這種情況下表單提交）。您無法在文本框中看到，因爲頁面正在重新加載（因此會清除文本框的值），因爲表單提交。 – Shyju

瞭解，謝謝！ – user793468

數據沒有在窗體上顯示AJAX成功

回答

相關問題