0

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

1）发布表单后，对话框自行关闭，而我在提交按钮处理程序的任何地方都没有发出对话框（'关闭'）。

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>
4

2 回答 2

2

好像整个页面在发布后刷新。与原始条目。

这正是发生的事情。虽然我不确定您将 POST 请求提交到哪里，因为action您的form. 但是由 a 触发的标准非 AJAX 请求form将请求发送到服务器，然后呈现来自服务器的响应。如果响应再次是同一页面，则将再次呈现同一页面。

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

1）发布表单后，对话框自行关闭，而我在提交按钮处理程序的任何地方都没有发出对话框（'关闭'）。

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

2) 名称条目不会附加到列表中。

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

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

这种误解包括 AJAX是JavaScript 的一部分这一事实。（“AJAX”中的“J”代表“JavaScript”。）这不是“切换到其他技术”。它利用了您已经在使用的技术的功能。实际上，AJAX 所做的只是向服务器发送请求和从服务器接收响应，而无需刷新页面上下文。

于 2013-10-06T17:57:22.840 回答
1

您没有正确附加name. 连接运算符不是 a comma，而是+javascript 中的 a：

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

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

于 2013-10-06T17:56:58.270 回答