ajax提交并响应

发布于 2024-11-19 22:51:49 字数 1049 浏览 2 评论 0原文

我正在尝试使用 ajaxSubmit 事件，以便用结果替换表单。该结果可能是确认页面或表单上的错误。这个表单在它自己的页面上工作，所以我正在努力将它放入 ajax 模式中。

<div id="biography">
    <form method="post" action="/{{ onesheet.url }}/contact/" id="contact-form" class="full">
        {% csrf_token %}
        <ul>
        {{ form.as_ul }}
        </ul>
        <input type="submit" value="Send Email">
    </form>
</div>

和 js

<script type="text/javascript">
    $('#contact-form').submit(function() { 
        var options = { 
            target:        '#biography',   // target element(s) to be updated with server response 
            beforeSubmit:  showRequest,  // pre-submit callback 
            success:       showResponse  // post-submit callback 
        };
        // submit the form 
        $(this).ajaxSubmit(options);
        // return false to prevent normal browser submit and page navigation 
        return false; 
    });
</script>

但这并没有在目标中加载响应。它在整个页面中打开它。

有什么想法吗？

原文

I'm trying to work with an ajaxSubmit event so the form is replaced with the result. That result could be a confirmation page or errors on the form. This form works on it's own page, so I'm working on putting it in an ajax modal.

<div id="biography">
    <form method="post" action="/{{ onesheet.url }}/contact/" id="contact-form" class="full">
        {% csrf_token %}
        <ul>
        {{ form.as_ul }}
        </ul>
        <input type="submit" value="Send Email">
    </form>
</div>

And the js

<script type="text/javascript">
    $('#contact-form').submit(function() { 
        var options = { 
            target:        '#biography',   // target element(s) to be updated with server response 
            beforeSubmit:  showRequest,  // pre-submit callback 
            success:       showResponse  // post-submit callback 
        };
        // submit the form 
        $(this).ajaxSubmit(options);
        // return false to prevent normal browser submit and page navigation 
        return false; 
    });
</script>

But this isn't loading the response in teh target. it's opening it in the entire page.

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晨曦慕雪 2024-11-26 22:51:49

您需要调用 e.preventDefault() 以阻止正常提交：

<script type="text/javascript">
$('#contact-form').submit(function(e) { 
    e.preventDefault();
    var options = { 
        target:        '#biography',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    };
    // submit the form 
    $(this).ajaxSubmit(options);
    // return false to prevent normal browser submit and page navigation 
    return false; 
});
</script>

You need to call e.preventDefault() in order to prevent the normal submit:

<script type="text/javascript">
$('#contact-form').submit(function(e) { 
    e.preventDefault();
    var options = { 
        target:        '#biography',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    };
    // submit the form 
    $(this).ajaxSubmit(options);
    // return false to prevent normal browser submit and page navigation 
    return false; 
});
</script>

回复收藏 0 原文

~没有更多了~