html/jQuery 表单上没有页面刷新？

Question

我进行了一些搜索，但似乎找不到我需要的东西。让我解释一下：

我有一个页面向数据库发送获取请求，然后 returns 一些问答数据。我希望用户能够在不刷新页面和丢失他们检索到的数据的情况下以表单形式回答问题。

我有我想要的东西 'kind of'。我的问题是它不是一种形式，它只是 and 。这样，用户每次都必须单击输入字段，然后单击按钮上的提交。

如果他们能或多或少地输入并按回车键 > 查看下一个问题 > 输入并按回车键 > 等等，我会更喜欢它。

这是我目前所掌握的一个例子，供参考...

<div id='content'>
    <div id='quizdiv'>
        <center>
            <button id='startbutton'>Click to load the data</button>
            <br><br>
            <!-- The actual quiz form, is hidden until the start button is clicked -->
                <div id='question' style='height: 40px; width: 250px; background-color: grey; border-radius:10%; font-weight:bold;'></div>
                <input type='text' id='answer'><br>
                <button id='answerbutton'>Check</button><br>
                <div id='result'></div>
        </center>
    </div>

Javascript代码：-

        <script type="text/javascript">
            $(document).ready(function() {
                $('#startbutton').click(function() {
                    $.get('getquestion',
                          function(data, status) {

                            //gets the data from the view function in a large string 
                            var qAndA = data;
                            //turns the string data into jquery object
                            window.jsonQA = jQuery.parseJSON( qAndA );
                            //printing it for accuracy
                            console.log(jsonQA);
                            //pushes everything into an array so I can get a random element by index
                            window.questionArray = [];
                            for (var i in jsonQA) {
                                questionArray.push(i);
                            }
                            //generates a random index number based on the length
                            var index = Math.floor(Math.random() * questionArray.length);
                            //create global var that is the random index from the question array
                            window.theQuestion = questionArray[index];
                            //changes the question div html to the question
                            $('#question').html(theQuestion);

                    });
                })
                $('#answerbutton').click(function() {
                    if ($('#answer').val() === jsonQA[theQuestion]) {
                        //prints right to the console
                        $('#result').html('CORRECT');
                    } else {
                        //prints wrong to the console
                        $('#result').html('WRONG');
                    }
                    var index = Math.floor(Math.random() * questionArray.length)
                    window.theQuestion = questionArray[index]
                    $('#question').html(theQuestion);
                })

            })
</script>

Answer 1

请阅读 AJAX。 AJAX 是一种在不重新加载页面的情况下向服务器发出请求的策略。

AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据和更新网页部分内容的艺术——无需重新加载整个页面。

Answer 2

我刚刚回答了我自己的问题。我在以错误的方式思考问题。因为我没有做任何类型的请求，所以没有理由在表格中做任何事情。

我已经使用 ajax 加载了数据，因此我可以利用 ajax .keypress 在按下回车键时在页面上执行某些操作。

html/jQuery 表单上没有页面刷新？

html/jQuery to have no page refresh on form?

html

forms

jquery