Django开发-ajax响应跳转新接口

潮流MI

于 2022-07-18 10:47:59 发布

阅读量701

点赞数

本文链接：https://blog.csdn.net/qq_41113002/article/details/125843559

版权

django 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

该博客展示了一个前端HTML表单的注册功能，使用jQuery进行Ajax提交，实现与后端接口'/user/add/'的数据交互。在注册成功后，通过window.location.href跳转到'/login/'接口。在表单验证中，错误信息会显示在相应字段旁边，并在接收到服务器响应后清除。

摘要由CSDN通过智能技术生成

跳转新接口的命令：window.location.href="/login/";

function bindBtnAddEvent() {

            $("#btnSave").click(function () {

                $(".error-msg").empty();   //将内容置空

                $.ajax({
                    url: "/user/add/",
                    type: "post",
                    data: $("#FormAdd").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            alert("注册成功");
                            // 跳转到新的接口
                            window.location.href="/login/";
                        } else {
                            $.each(res.error, function (name, errorList) {
                                // errorList是因为错误信息是一个数组
                                // ModelForm会自动创建一个id，比如：id="id_title"
                                // next()是下一个标签
                                $("#id_" + name).next().text(errorList[0]);
                            })
                        }
                    }

                });
            });
        }

应用：register.html

{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{ title }}</h3>
            </div>
            <div class="panel-body">
                <form id="FormAdd" novalidate>  <!-- novalidate把游览器的校验关闭 -->

                    {% for field in form %}
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>{{ field.label }}</label>
                                    {{ field }}
                                    <!--表示只显示第一个错误： field.errors.0 -->
                                    <span class="error-msg" style="position: absolute;color: red;"></span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

                    <button id="btnSave" type="button" class="btn btn-primary">提 交</button>
                    <a href="/login/" class="btn btn-primary" style="margin-left: 25px;">登 录</a>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            bindBtnAddEvent();
        })

        function bindBtnAddEvent() {

            $("#btnSave").click(function () {

                $(".error-msg").empty();   //将内容置空

                $.ajax({
                    url: "/user/add/",
                    type: "post",
                    data: $("#FormAdd").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            alert("注册成功");
                            // 跳转到新的接口
                            window.location.href="/login/";
                        } else {
                            $.each(res.error, function (name, errorList) {
                                // errorList是因为错误信息是一个数组
                                // ModelForm会自动创建一个id，比如：id="id_title"
                                // next()是下一个标签
                                $("#id_" + name).next().text(errorList[0]);
                            })
                        }
                    }

                });
            });
        }

    </script>
{% endblock %}

{#{% block js %}#}
{#    <script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.js' %}"></script>#}
{#    <script src="{% static 'plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>#}
{#    <script src="static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>#}
{#    <script src="static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>#}
{#    <script type="text/javascript">#}
{#        $(function () {#}
{#            $('.dt').datepicker({#}
{#                format: 'yyyy-mm-dd',#}
{#                // startDate: '0',    // 表示开始时间从当前时间开始#}
{#                language: "zh-CN",#}
{#                autoclose: true#}
{#            });#}
{#        });#}
{#    </script>#}
{#{% endblock %}#}