html/jQuery에서 양식을 새로 고침하지 않으시겠습니까?

검색을 몇 번했는데 필요한만큼 찾지 못했습니다. 설명해 드리겠습니다 :html/jQuery에서 양식을 새로 고침하지 않으시겠습니까?

DB에 요청을 보내고 몇 가지 질문과 답변 데이터를 반환하는 페이지가 있습니다. 사용자가 페이지를 새로 고치지 않고 검색 한 데이터를 잃지 않고 양식에 질문에 대답 할 수 있기를 바랍니다.

나는 내가 원하는 것처럼 일종의 '일종'이있다. 내 문제는 그것이 형식이 아니라는 것입니다. 이렇게하면 사용자는 입력 필드를 클릭 한 다음 매번 버튼에 대해 제출을 클릭해야합니다.

가 더 많거나 적은 단지 등> 다음

를 입력하고 Enter 키를 누르십시오> 다음 질문> 유형을 확인하고 Enter 키를 누르십시오 수 있다면 나는 그것을 선호는 지금까지 참조 할 수있는 내용의 예입니다 .. .

<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>

자바 스크립트 코드 : -

 <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>

출처

2015-01-03 deltaskelta