Jquery表单提交行为不可理解

Jquery form submit behavior not understandable

本文关键字：可理解 表单提交 Jquery      更新时间：2023-09-26

我正在使用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>

就好像整个页面在帖子发布后刷新一样。

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

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

1(发布表单后，对话框会自行关闭，而无需我在提交按钮处理程序中的任何位置发出对话框("关闭"(。

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

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

在页面

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

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

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

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

$('#selectable').append("<li class='ui-widget-content'>" + name + "</li>");
接下来，表单

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

相关文章：