JQuery Post это ajaxrequest?

Question

Я пытался заставить это работать в течение 3 часов. я делаю пост jquery, но кое-где в строке я делаю что-то не так, но я не понимаю, что.

в моем методе я проверяю, является ли это ajaxrequest, и если это так, я возвращаю строковое сообщение на основе результата.

[HttpPost]
    public ActionResult PostJquery(ContactViewModel viewModel)
    {
        if (Request.IsAjaxRequest())
        {
            if (!string.IsNullOrEmpty(viewModel.Email))
            {
                return Content("success");
            }
            else
            {
                return Content("Fail");
            }   
        }
        else
        {
            return RedirectToAction("About");
        }
    }

мои jquery и html выглядят так.

<% using (Html.BeginForm())
   {%>
<%: Html.TextBoxFor(model => model.Email) %>
<br />
<br />
<%: Html.TextBoxFor(model => model.Title) %><br />
<input type="submit" value="Save" id="button" />
<%} %>


<script src="<%= Url.Content("~/Scripts/jquery-1.5.2.js") %>" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {            
        $('#button').click(function (e) {
                            $.post('/Home/PostJquery', { viewModel: $('form').serialize() }, function (data) { alert(data); });                
        });
    });

</script>

что он делает, это входит в метод и перенаправляет на сайт, потому что это не ajaxrequest, если я удаляю его, он возвращает успех, но он выводит меня на пустую страницу с написанным текстом успеха. это не вызывает успех в тревоге. Что я, возможно, делаю неправильно? я должен использовать .post или .ajax?

спасибо за вводимые люди

Answer 1

Необходимо отменить действие по умолчанию для кнопки, которая заключается в отправке формы, вернув false:

$(function () {            
    $('#button').click(function() {
        $.post('/Home/PostJquery', $('form').serialize(), function (data) { 
            alert(data); 
        });
        return false;
    });
});

Также обратите внимание на способ передачи параметров. Метод .serialize() уже подготавливает запрос, поэтому вы должны отправить его в качестве второго аргумента.

но лучшим способом AJAXify формы является подписка на событие .submit() этой формы:

$(function () {            
    $('form').submit(function() {
        $.post(this.action, $(this).serialize(), function (data) { 
            alert(data); 
        });
        return false;
    });
});

И еще лучше использовать плагин jquery form , который превращает ваш код в:

$(function () {            
    $('form').ajaxForm(function(data) {
        alert(data);
    });
});

Примечание: убедитесь, что вы указали правильный тип контента на своем сервере при возврате из запроса AJAX.