将表单字段中的数据添加到页面上的表格而不刷新整个页面

Question

我在这个网站上看到的大部分内容是指从 php 向 div 添加信息。我只想获取用户的输入，将其动态添加到表格中，并在单击提交按钮时将其显示在 div 中。

此时，我没有做任何将数据发布到数据库、没有 php 等的事情。

我也有运行动态添加到数据库的 JQuery。它可以工作，但我必须在 javascript 中使用断点来单步执行并查看添加到行中的输入数据......问题是当该功能完成时，页面刷新，所有数据都消失了。

我需要一种方法将数据添加到 div 中的表中，而无需每次刷新页面并清除所有其他数据。

想象一个 div 中的父信息，而另一个 div 中添加子信息。当我添加每个子片段时，我不希望删除父信息，实际上希望它保留为“可编辑”信息。

------------------------------ 编辑 ---- ------------------------------------------
下面是我现在根据建议使用的代码，但我显然不完全理解，因为它会点击事件处理程序，但不会进入函数内部，只是跳回，并且永远不会点击我的其他断点在里面。

---------------------------------------最终编辑 ------ ----------------------------------------------------
我终于把头从背后拉出来，注意查理告诉我的内容，然后得到了这个……当我从 onClick 事件中调用函数时，它就起作用了。我无法将事件绑定到按钮单击，但这可能是因为我使用的是标签而不是设置。

function(addNoteRow){
            event.prevent.Default();
            var noteTxt = $('#noteEntry').val();
            var noteEntBy = 'BGM'
            noteEntDate = (Date());
            if (!document.getElementsByTagName) return;
            tabBody=document.getElementsByTagName("TBODY").item(0);
            row=document.createElement("TR");
            cell1=document.createElement("TD");
            cell2=document.createElement("TD");
            cell3=document.createElement("TD");
            textnode1=document.createTextNode(noteEntDate);
            textnode2=document.createTextNode(noteEntBy);
            textnode3=document.createTextNode(noteTxt);
            cell1.appendChild(textnode1);
            cell2.appendChild(textnode2);
            cell3.appendChild(textnode3);
            row.appendChild(cell1);
            row.appendChild(cell2);
            row.appendChild(cell3);
            tabBody.appendChild(row);
        }

Answer 1

您提到您正在使用 jQuery，所以我将在我的示例中简化此操作。

 $('#submit_button').click( // Bind an event handler to the submit button
        function(event){
            event.preventDefualt(); //This is necessary if you are using a an submit button input element as normal behavior is to submit the form without ajax causing the page location to change. Event is automatically passed in, and we can call preventDefault() on this object to stop the browser from navigating away from our page.
            $.ajax({
                url:'http://youserver.com/script_that_will_respond.php', //Give the ajax call a target url
                data: $('#user_input').val(), //Supply some data to send with the request,
                success: function(data){ //Supply an anonymous function to execute on success. The parameter will be the response text.
                    $('#your_result_div').html(data); //On success of the ajax call, put the response text into an html element on your page
                }
            });
        }
    );

jQuery 的 ajax 方法有很多设置。这是一个非常简单的例子。 您可以在此处阅读有关各种选项的更多信息：http://api.jquery.com/jQuery.ajax/

编辑：我可能误解了。如果您不需要访问服务器，并且想在本地完成这一切，那就更简单了。

$('#submit_button').click( // Bind an event handler to the submit button
    function(event){
        event.preventDefault();
        /*
        We have to call this method on the event object bacause deafult behavior
        of a subnmit button is to submit the form, causing the browser to go to a new page.
        */
            var text = $('#some_input_element').val(); //Store the value of a text input in the variable text
            $('#your_div').html(text); //put the contents of the variable text into the "your_div" elemnt.
        }
);

Answer 2

尝试使用 AJAX 部分刷新部分页面，例如 div 等。 http://api.jquery.com/jQuery.ajax/