为什么点击按钮后页面毫无反应？

Question

以下是我的代码，我想通过模态框和Ajax实现传递返回数据的功能，但现在为什么页面没有一点反应，而且也不返回错误提示，代码是有在页面中写返回错误信息的
前端代码

<div class="container">
    <div>
        <input id="btnAdd" type="button" value="新建订单" class="btn btn-primary">
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新建订单</h4>
                </div>
                <div class="modal-body">
                    <form id="formAdd" novalidate>
                        <!--<div class="clearfix">-->
                        {% for field in form%}
                        <!--<div class="col-xs-6">-->
                        <div class="form-group" style="position:relative;margin-bottom:20px;">
                            <label> {{ field.label}}</label>
                            {{field}}
                            <span class="error-msg" style="color:red;position:absolute"></span>
                        </div>
                        <!--</div>-->
                        {%endfor%}
                        <!--</div>-->
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="btnSave" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

<!--        订单展示-->
        function bindBtnAddEvent() {
            $('#btnAdd').click(function(){
<!--                点击新建按钮，显示对话框-->
                $('#myModal').modal("show");
            });
        }
         function bindBtnSaveEvent() {
            $("btnSave").click(function(){
                $(".error-msg").empty();
                $.ajax({
                    url:"/order/add/",
                    type:"POST",
                    data:$("formAdd").serialize(),
                    dataType:"json",
                    success:function(res){
                       if(res.status){
                            alert("创建成功");
                       }else{
                            $.each(res.error,function(name,errorList){
                                $("#id_"+name).next().text(errorList[0]);
                            })
                        }
                    }
                })
            });
        }
</script>

后端代码

@csrf_exempt
def task_add(request):
    """任务添加"""
    print(request.POST)
    # 1.用户发送过来的数据进行校验(ModelForm进行校验)
    form = TaskModelForm(data=request.POST)
    if form.is_valid():
        form.save()
        data_dict = {"status": True}
        return HttpResponse(json.dumps(data_dict))

    data_dict = {"status": False, 'error': form.errors}
    return HttpResponse(json.dumps(data_dict, ensure_ascii=False))

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

你好，根据你提供的代码和描述，以下是一些可能的原因和解决方案，帮助你解决点击按钮后页面没有反应的问题：

1. 检查JavaScript错误

首先，打开浏览器的开发者工具（通常可以通过按F12或右键点击页面并选择“检查”来打开），查看控制台（Console）是否有错误信息。错误信息通常会指出问题所在。

2. 检查事件绑定

在JavaScript代码中，确保事件绑定正确。你的代码中使用了$("btnSave")，但这里应该使用$('#btnSave')，因为btnSave是一个ID，而不是类名。修改后的代码如下：

function bindBtnSaveEvent() {
    $('#btnSave').click(function(){
        $(".error-msg").empty();
        $.ajax({
            url:"/order/add/",
            type:"POST",
            data:$("#formAdd").serialize(),
            dataType:"json",
            success:function(res){
                if(res.status){
                    alert("创建成功");
                }else{
                    $.each(res.error,function(name,errorList){
                        $("#id_" + name).next().text(errorList[0]);
                    })
                }
            }
        })
    });
}

3. 检查AJAX请求

确保AJAX请求的URL和数据格式正确。你的后端代码返回的是JSON格式，前端也需要正确解析这些数据。同时，检查后端是否正确处理了POST请求。

4. 检查后端代码

你的后端代码使用了@csrf_exempt，这可能会影响CSRF保护。确保你的后端代码能够正确处理POST请求，并返回正确的数据格式。同时，检查是否有其他错误处理逻辑。

5. 检查数据传递

确保前端发送的数据和后端接收的数据格式一致。你的前端代码使用了$("#formAdd").serialize()来序列化表单数据，确保这些数据是后端期望的格式。

6. 检查网络请求

使用开发者工具的网络面板（Network）来检查AJAX请求的发送和响应。查看请求的URL、方法、请求头和响应体，确保它们都是正确的。

7. 浏览器兼容性

检查你的代码是否在所有浏览器中都能正常工作。有时，某些浏览器的兼容性问题可能会导致代码无法正常执行。

8. 调试工具

利用浏览器的调试工具，如元素检查器（Elements）、控制台（Console）、网络面板（Network）等，来逐步调试代码，查找问题所在。

通过以上步骤，你应该能够找到问题所在，并解决点击按钮后页面没有反应的问题。如果问题仍然存在，可以进一步检查代码逻辑，或者提供更多的错误信息以便进一步分析。