javascript - Ajax 发布后页面重新加载

Question

我正在使用 asp.net MVC 制作单页应用程序

当我从 Ajax 发送到服务器时，Web API 验证发送的参数，然后返回一个 Json 字符串。这是我的 Web API 中的函数

Public Class VerifyReturn
    Public SerBool As String
    Public SerMessage As String
    Public TextBool As String
    Public TextMessage As String
End Class

<HttpPost>
Public Function ValidateParam(ByVal ser As Integer, ByVal content As String) As List(Of VerifyReturn)
    Dim ErrorsJson As String = ""
    Dim Errors As Boolean = False


    Try
        If Not ser = Nothing AndAlso IsNumeric(ser) = True Then  
            ErrorsJson &= "[{""SerBool"":""0"",""SerMessage"":"""","
        Else
            ErrorsJson &= "[{""SerBool"":""1"",""SerMessage"":""Not Valid."","
            Errors = True
        End If

       If Not content Is Nothing AndAlso content.Length < 151 Then
            ErrorsJson &= """TextBool"":""0"",""TextMessage"":""""}]"
       Else
            ErrorsJson &= """TextBool"":""1"",""TextMessage"":""Content Too Large.""}]"
            Errors = True
        End If

        Dim ReturnJson = JsonConvert.DeserializeObject(Of List(Of VerifyReturn))(ErrorsJson)
        Return ReturnJson


    Catch ex As Exception

    End Try
End Function

这是我的 Ajax:

 $(document).ready(function () {
      $('#BtnInsert').click(function () {

           $.ajax({
                    url: '@Url.Content("~/api/ContentM/ValidateParam?ser=")' + $('#SerList').val() + ("&content=") + $('#TxtContent').val(),
                    type: 'POST',
                    success: function (responseData) {
                        for (var i = 0; i < responseData.length; i++) {

                            If(responseData[i].TextBool == '1')
                            {
                                $('#LblErrors').val(responseData[i].TextMessage);
                            }
                        }
                    }
                });
          });
      });

API函数正在被触发，并且服务器端程序运行良好，

但是当 ajax 调用完成时，页面重新加载，并且我在 $('#LblErrors') 标签中看不到任何内容。

我做错了什么？

Answer 1

如果我没记错的话，使用 <button></button>在 HTML 上，会自动提交表单。那可能是你的问题。解决这个问题的一种方法是输入 return false正如我们的 friend 上面所说的。所以应该是这样的:<button id="BtnInsert" onclick="return false">Insert</button> 。另一种方法是防止在 .click(function(e) 内自动提交函数使用 e.preventDefault()