ajax 调用后 HTML 的数据和内容丢失答案

【问题标题】：Data and contents of HTML is getting lost after ajax callajax 调用后 HTML 的数据和内容丢失
【发布时间】：2015-10-24 06:14:30
【问题描述】：

我正在进行如下所述的 ajax 调用。我正在开发一个简单的退订表单，用户在其中输入电子邮件并从邮件警报中退订。使用django框架

<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js" ></script>
</head>
<body>
    <div id="errorDiv"></div>
    <form id="unsubscribeform" class="unsubscribeform" method="POST" action="{% url 'polls:unsubscribe' %}"  enctype="multipart/form-data">
        {% csrf_token %}
        <label class="required" for="emailUnsubscription">Email</label>
        <input id="emailUnsubscription" name="unsubscribeEmail" type="email"><br><br>
        <input value="unsubscribe" class="submit" id="submit" type="submit"/>
    </form>
    <script>
        $(document).ready(function()
        {
            $('.submit').bind('click', function(event)
            {
                event.preventDefault();
                var form_data = new FormData($(".unsubscribeform")[0]);
                $.ajax({
                    type: 'POST',
                    url:"?ajax=1",
                    data:form_data,
                    processData: false,
                    contentType: false,
                    success:function(response)
                    {
                        var resp = response;
                        var noUserError = response.nouser;
                        var emptyEmailError = response.emptyemail;
                        if(typeof emptyEmailError === 'undefined' && typeof noUserError === 'undefined'){
                            $(.submit).unbind('click').submit();
                        }else{
                            if(typeof emptyEmailError === 'undefined')
                                emptyEmailError = "";
                            if(typeof noUserError === 'undefined')
                                noUserError = "";
                            $(".errorlist").remove();
                            console.log(noUserError, emptyEmailError);
                            $("errorDiv").append('<span class="errorlist"><br>'+Please correct following errors+'</span>');
                            $("errorDiv").append('<span class="errorlist"><br>'+noUserError+'</span>');
                            $("errorDiv").append('<span class="errorlist"><br>'+emptyEmailError+'</span>');
                        }
                    }
                });
            });
        });
    </script>
</body>

在 html 中成功返回我的表单后，我丢失了，我只得到一个带有 json 返回的普通 html。

ajax调用后浏览器显示如下文字

{"nouser": "No user exists with given email id"}

我做错了什么

【问题讨论】：

你能不能也展示一下php的一面？

标签： jquery ajax django html

【解决方案1】：

您需要将您的代码更新为以下

$('.submit').bind('click', function(event) {
    event.preventDefault();
    ....

});

【讨论】：

详细说明这个答案event.preventDefault 防止在单击处理程序完成后单击您的按钮正常进行。更多详情：api.jquery.com/event.preventdefault
根据您的代码，您正在执行$(elemid).bind('submit', function() 这个内部点击事件。这似乎是不必要的。请删除此绑定并尝试。
@MaximillianLaumeister - 谢谢你的努力 :)
@nikhil 我已经按照你的建议更新了我的代码。但我仍然得到相同的结果
我还有 2 个问题。首先，你的网址是?ajax=1，对吗？其次，对于 AJAX，你有成功回调但没有错误回调。尝试添加它。此外，请不要一次又一次地更新您的问题，因为任何现在将提出问题的人都会发现我的答案与问题相同且无关紧要。如果要更新，请在更新标题块下更新它