Javascript表单提交到新页面——我如何将它保持在同一页面上

Javascript form submits to new page -- how can I keep it on the same page?

本文关键字：一页 表单提交 新页面 Javascript      更新时间：2023-09-26

这里是初学者程序员。试图创建一个非常的原始"聊天界面"，在JSP中，我键入一些单词，它们存储在一个数组中，然后，理想情况下，吐回同一页。我已经让代码工作了一些，但它加载到了一个新页面。

我试过在网上读到的很多不同的东西，包括尝试在showChats函数中添加"return false"，尝试将提交更改为按钮，以及执行"onclick"，但仍然不起作用，总是加载一个新页面。关于如何解决这个问题有什么想法吗？

提前谢谢。这是代码：

<script>
counter = 0;
//Array containing initial elements.
var chats = [];
function show_array(array) {
    array[counter] = document.getElementById("chatlet").value;
    for (x = 0; x < array.length; x++){
        document.write(array[x] + "<br/>");
    }
    counter++;
}
</script>
<form action="agenda2.jsp" method="get" onsubmit="show_array(chats)" >
    <p>
        <textarea id="chatlet" rows="10" cols="30"></textarea>
    </p>
    <input type="submit" value="Send Chat">
</form>

</body>
</html>

您需要在JS函数中添加带有onsubmit的return关键字，如onsubmit="return show_array(chats)"和return false。

代码：

<form action="agenda2.jsp" method="get" onsubmit="return show_array(chats)" >

JS

counter = 0;
var chats = [];
function show_array(array) {
    array[counter] = document.getElementById("chatlet").value;
    for (x = 0; x < array.length; x++) {
        document.write(array[x] + "<br/>");
    }
    counter++;
    return false;
}

DEMO

使用查询可以在下面执行

$('form').submit(function (e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: $(this).attr('action'),
      data: 'get form data',
        success: function (res) {
            // handle response here
        }
    });
});

在函数show_array（）的末尾，必须添加return false；或者在其他情况下，您可以使用jQuery进行协调并执行以下操作：

给你的表格一个类别或id

<form class="myform">
....
</form>
<script>
    $("myform").on('submit', function(e) {
        e.preventDefault();   
    });
</script>

问候！

相关文章：