Отправка формы внутри div с помощью AJAX

Question

Я пытаюсь отправить форму, используя AJAX, чтобы браузер не обновлял страницу.Форма находится внутри дополнительной страницы, которая вызывается в div главной страницы (аналогично использованию главной страницы и заполнителя содержимого).

Я пробовал несколько методов, но всегда сталкивался с одной и той же проблемой.Всякий раз, когда я пытаюсь отправить форму, ответом является дополнительная страница с формой, и я не могу поместить awnser в div содержимого главной страницы, как предполагалось.

Любые советы о том, как заставить это работать?

    Main Page


    <div id="content"> Secondary page content goes in here loaded using AJAX</div>



    Secondary Page

    <form runat="server" id="formuser">
            <asp:TextBox ID="txtusername" runat="server"></asp:TextBox>
            <asp:TextBox ID="txtemail" runat="server"></asp:TextBox>
            <a href="#" onclick="document.formuser.submit()"> Submit Form </a>
    </form>

Что я намерен сделать, это отправить вышеуказанную форму, оставаясь на главной странице и показывая ответ в разделе содержимого.Мне нужно, чтобы форма была runat = "server", чтобы я мог манипулировать данными с помощью выделенного кода.

Answer 1

Используйте некоторые jquery:

       $('#SaveFormButton').click(function (e) {
                $.ajax({
                    type: "POST",
                    url: $('#FormToSubmit').attr("action"),
                    data: $('#FormToSubmit').serialize(),
                    success: function (data) {
                        //Whatever you want to do after the form has posted
                    },
                    error: function(data){
                        alert("Error");
                    }
                });
        });

Answer 2

Похоже, что метод, который я использовал для загрузки контента, создавал xmlHttpRquest, и он конфликтовал с ответом, который я получил от jquery.

Answer 3

Что-то вроде этого должно сделать это.Таким образом, используя e.preventDefault (), вы можете использовать стандартную разметку формы и кнопки отправки.

http://jsfiddle.net/CcDPx/1/