Question

我有一个带有提交按钮的表单，我试图获得一个工作的ajax调用，它将在屏幕上显示一个微调器，让用户知道表单正在处理提交信息。从我所知，表格永远不会调用ajax，我无法弄清楚为什么。

这是表格（缩写为提交按钮部分）：

<form id="generateDocumentForm" action="/Documents/GenerateDocument" method="POST" class="form-horizontal">
     <div>
         <div class="RcmDialogBody">
            "This just has text boxes and things of that nature"
         </div>   


         <div class="form-actions">
             <input type="submit" value="Generate" class="btn btn-primary" />       <-----This is the button I am trying to use to call the ajax
             <button type="button" onclick="hideModal()" class="btn">Cancel</button>
         </div>  
     </div>
</form>

这是无效的ajax：

<script type="text/javascript">
    $(document).ready(function(){
        $("generateDocumentForm").submit(function(){
            var docspinner;
            docspinner = new Spinner()

            $.ajax({
                type: "POST",
                url: "/Documents/GenerateDocument",
                cache: false,
                beforeSend: function () {
                    if (docspinner) {
                        alert('has spinner!');

                        if(docspinner.hasOwnProperty('show'))
                            alert('has show!');
                    }
                    docspinner.show('Working');
                },
                complete: function () {
                    docspinner.hide();
                },
                success: function (data, textStatus) {
                    alert('done!');
                    if (data.success == true) {
                        notify.success({ header: 'Document Generated!' });
                    } else {
                        notify.warn({ header: 'Error Generating Document!' });
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    if (!checkAndHandleAjaxAccessDenied(xhr.responseText)) {
                        notify.error({ header: 'Error' });
                    }
                }
            })
        })
    })
</script>

Answer 1

将$("generateDocumentForm").submit更改为$("#generateDocumentForm").submit

请记住，标签很重要！ :)否则你的代码中的其他一切看起来都很稳固。希望这有帮助！

<script type="text/javascript">
    $(document).ready(function(){
        $("#generateDocumentForm").submit(function(e){ //added hastag to properly grab the form by id
            e.preventDefault(); //prevent default submission by the browser. Without this the ajax call will fail because your page will reload each time, explained in comments as well
            var docspinner;
            docspinner = new Spinner()

            $.ajax({
                type: "POST",
                url: "/Documents/GenerateDocument",
                cache: false,
                beforeSend: function () {
                    if (docspinner) {
                        alert('has spinner!');

                        if(docspinner.hasOwnProperty('show'))
                            alert('has show!');
                    }
                    docspinner.show('Working');
                },
                complete: function () {
                    docspinner.hide();
                },
                success: function (data, textStatus) {
                    alert('done!');
                    if (data.success == true) {
                        notify.success({ header: 'Document Generated!' });
                    } else {
                        notify.warn({ header: 'Error Generating Document!' });
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    if (!checkAndHandleAjaxAccessDenied(xhr.responseText)) {
                        notify.error({ header: 'Error' });
                    }
                }
            })
        })
    })
</script>

单击提交按钮时不会调用ajax

1 个答案: