Question

我正在使用js和jquery为一个小型webproject编写代码。在其中，在某个时刻，点击按钮，我创建一个对话框。该对话框中有一个表单，其中包含名称字段和一些数字字段。我应该检查用户输入并将它们发送到服务器，同时将名称字段附加到浏览器中的列表，给亲密用户，还添加了一个项目。两件奇怪的事情正在发生 -

1）发布表单后，对话框自行关闭，而不会在提交按钮处理程序的任何位置发出对话框（'close'）。

2）名称条目未附加到列表中。它就像提交后整个页面刷新一样。使用名称列表的原始默认条目。

任何人都有任何关于为什么会发生这种情况的想法？会发布一些代码供您使用。请不要建议使用Ajax代替。我认为这反映了我对JS方法理解的一些根本缺陷，并且希望首先清除它而不仅仅是转换到其他技术。

    <div id='dialog' title='Define New Matrix'>
<form name='form1' id='form1'  method='post'>
<fieldset>
    <label for="Name">Name</label>
    <input type='text' name='nameofmatrix' id='Name' class='whitepanes'><br>
    <label for="a11">a11</label>
    <input type="text" name='a11' id='a11' class='whitepanes number-field'><br>
    <label for="a22">a22</label>
    <input type="text" name='a22' id='a22' class='whitepanes number-field'><br>
    <button id='submit_button'>Submit</button>
    <button id='cancel_button'>cancel</button>
</fieldset>
</form>
    <p id='tip' style='color:red;'><i>All fields are required</i></p>
</div>
<script>
    //#button_define is a button on whose clicking the dialog opens. 
            $('#button_define').click(function(){
        $('#dialog').dialog('open');
        $('#tip').html("<p style='color:red; font-size:small'>All fields are      mandatory</p>");
    });

    $('#submit_button,#cancel_button').button();

    $('#cancel_button').on('click',function(){
            $('#dialog').dialog('close');
    });

    $('#submit_button').click(function(event){
        event.preventDefault();
        var name=$('input[name=nameofmatrix]').val();
        //Validate is a function which returns a bool if validation proceeds     correctly
        var isCorrect = Validate();
        if(isCorrect){
        //if validated correctly then add to list

            $('#form1').submit();   
            //$('#dialog').dialog('close');
            $('#selectable').append("<li class='ui-widget-content'>",name,"</li>"); 
        } 

    });
</script>

Answer 1

就像整个页面在帖子后刷新一样。与原始条目。

这正是发生的事情。虽然我不确定您将POST请求提交到的位置，因为action上没有form属性。但是由form触发的标准非AJAX请求将请求发送到服务器，然后从服务器呈现响应。如果响应再次出现在同一页面上，则会再次呈现此页面。

当JavaScript加载此新响应时，它不会记住上一页的状态。即使它们是同一页面，它们也是来自服务器的两个单独响应。所以......

1）发布表单后，对话框自行关闭，而不会在提交按钮处理程序的任何位置发出对话框（'close'）。

对话框未关闭。页面刷新后，您处于全新页面上下文中。它没有关闭，在这种情况下它还没有被打开。

2）名称条目未附加到列表中。

当页面加载时，没有什么会导致这种情况发生，所以在新的页面上下文中它不会发生。您的服务器端代码需要在POST请求的响应中包含此内容。

我认为这反映了我对JS方式理解的一些根本缺陷，并希望首先清除它而不仅仅是转换到其他技术。

误解中包含AJAX 是 JavaScript的一部分。（“AJAX”中的“J”代表“JavaScript”。）它不是“切换到其他技术”。它正在利用您已经使用的技术的功能。实际上，所有AJAX都是发送请求并从服务器接收响应而不刷新页面上下文。

Answer 2

您未正确追加name。连接运算符不是comma，而是javascript中的+：

$('#selectable').append("<li class='ui-widget-content'>" + name + "</li>");

接下来，表单会刷新，因为您使用$('#form1').submit();提交表单。如果您不希望在提交时刷新页面，请使用ajax。

Jquery表单提交行为不可理解

2 个答案: