Javascript Jquery表单提交行为不可理解_Javascript_Jquery

Javascript Jquery表单提交行为不可理解

javascript jquery

Javascript Jquery表单提交行为不可理解,javascript,jquery,Javascript,Jquery,我正在使用js和jquery为一个小型Web项目编写代码。在其中，在某个点上，单击一个按钮，我创建了一个对话框。对话框中有一个表单，其中有一个名称字段和一些数字字段。我应该检查用户输入并将其发送到服务器，同时将名称字段附加到浏览器中的列表中。对于亲密用户，又添加了一项。两件奇怪的事情正在发生- 1）发布表单后，对话框会自动关闭，而我不会在提交按钮处理程序中的任何位置发出对话框（“关闭”） 2）名称条目不会附加到列表中。提交后，整个页面似乎都会刷新。使用名称列表的原始默认条目有人知道为什么会

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


名称


a11


a22


提交
取消
所有字段都是必填字段
//#按钮\u define是一个按钮，单击该按钮将打开对话框。
$（“#按钮_定义”）。单击（函数（）{
$（'dialog'）。dialog（'open'）；
$（'#tip'）.html（所有字段都是必填的）；
});
$（“#提交按钮，#取消按钮”）。按钮（）；
$（“#取消按钮”）。在（'单击'，函数（）上{
$（'dialog'）。dialog（'close'）；
});
$（“#提交按钮”）。单击（函数（事件）{
event.preventDefault（）；
var name=$（'input[name=nameofmatrix]'）。val（）；
//Validate是一个函数，如果验证正确进行，它将返回bool
var isCorrect=Validate（）；
如果（不正确）{
//如果验证正确，则添加到列表中
$（'表格1'）。提交（）；
//$（'dialog'）。dialog（'close'）；
$（“#可选”）。追加（“”，名称“”；
} 
});

您没有正确地附加

名称。连接运算符不是逗号
，而是javascript中的+
：
$('#selectable').append("<li class='ui-widget-content'>" + name + "</li>");

$（“#可选”）.append（“+name+””）；

接下来，表单将刷新，因为您正在使用$（'#form1'）.submit（）提交表单。如果您不想在提交时刷新页面，请使用ajax。
您没有正确地添加名称。连接运算符不是逗号
，而是javascript中的+
：
$('#selectable').append("<li class='ui-widget-content'>" + name + "</li>");

$（“#可选”）.append（“+name+””）；

接下来，表单将刷新，因为您正在使用$（'#form1'）.submit（）提交表单。如果您不想在提交时刷新页面，请使用ajax。
您没有正确地添加名称。连接运算符不是逗号
，而是javascript中的+
：
$('#selectable').append("<li class='ui-widget-content'>" + name + "</li>");

$（“#可选”）.append（“+name+””）；

接下来，表单将刷新，因为您正在使用$（'#form1'）.submit（）提交表单。如果您不想在提交时刷新页面，请使用ajax。
您没有正确地添加名称。连接运算符不是逗号
，而是javascript中的+
：
$('#selectable').append("<li class='ui-widget-content'>" + name + "</li>");

$（“#可选”）.append（“+name+””）；

接下来，表单将刷新，因为您正在使用$（'#form1'）.submit（）提交表单。如果您不希望在提交时刷新页面，请使用ajax
这就好像整个页面在发布后都会刷新一样。保留原始条目
这正是发生的事情。虽然我不确定您将POST请求提交到哪里，因为您的表单上没有操作
属性。但是由表单触发的标准非AJAX请求将请求发送到服务器，然后呈现来自服务器的响应。如果响应再次出现在同一页上，则将再次呈现同一页
当JavaScript加载这个新响应时，它不会记住上一页的状态。即使它们是同一个页面，它们也是来自服务器的两个独立响应。所以
1） 发布表单后，对话框会自动关闭，而我不会在提交按钮处理程序中的任何位置发出对话框（“关闭”）
对话框没有关闭。页面刷新后，您将进入一个全新的页面上下文。它没有关闭，只是在这种情况下还没有打开
2） 名称条目不会附加到列表中
当页面加载时，没有什么会导致这种情况发生，因此在新页面上下文中不会发生这种情况。服务器端代码需要在对POST请求的响应中包含此内容
我认为这反映了我对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>

这种误解包括AJAX是JavaScript的一部分这一事实。（AJAX中的“J”代表“JavaScript”）它不是“切换到其他技术”，而是利用了您已经使用的技术的功能。实际上，AJAX所做的只是向服务器发送请求和从服务器接收响应，而无需刷新页面上下文
这就好像整个页面在发布后都会刷新一样。保留原始条目
这正是发生的事情。虽然我不确定您将POST请求提交到哪里，因为您的表单上没有操作
属性。但是由表单触发的标准非AJAX请求将请求发送到服务器，然后