Javascript Enviar dados para o Servlet através de JavaScript

Ana Grossi · 28 de setembro de 2018

Olá ! Mais uma vez venho pedir ajuda de vocês. É o seguinte: tenho um jogo tipo quis feito em HTML e JavaScript, e preciso salvar quantas perguntas o cara acertou no Banco de Dados, para ficar registrado. Tem a variável que armazena o resultado (score), mas eu não sei como enviar ela para o banco de dados (estou usando PostgreSQL e Java Web para programação). Alguma ideia? Segue o código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>quis</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>

    var quiztitle = "quis de Primeiros Socorros";
   
    var quis = [
        {
            "question"      :   "1: Como socorrer uma vítima de crise convulsiva?",
            "image"         :   "https://nevrology-md.ru/files/source/Novostie/Nevrologie/chto-takoe-epilepsi43848834.jpg",
            "choices"       :   [
                                    "Lateralizando a vítima, preferencialmente para o lado esquerdo",
                                    "Dando água para a vítima",
                                    "Segurando firme os braços da vítima, para evitar lesões pelos espasmos",
                                    "Puxando a língua da vítima com os dedos, para evitar sufocamento"
                                ],
            "correct"       :   "Lateralizando a vítima, preferencialmente para o lado esquerdo",
            "explanation"   :   "A lateralização da vítima para o lado esquerdo serve para desobstruir as vias aéreas e evitar que a vítima sufoque, caso vomite. Não se deve movimentar a vítima ou tentar segurá-la, para evitar lesões na vítima e no próprio socorrista.",
        },
        {
            "question"      :   "2: O que NÃO fazer em uma vítima de picada de cobra Jararaca?",
            "image"         :   "https://upload.wikimedia.org/wikipedia/commons/0/09/Jararaca_-_Bothrops_jararaca_-_Sibilando.jpg",
            "choices"       :   [
                                    "Lavar o local com água e sabão",
                                    "Fazer torniquete",
                                    "Colocar pano limpo, sem pressionar a área",
                                    "Evitar que a vítima faça movimentos bruscos"
                                ],
            "correct"       :   "Fazer torniquete",
            "explanation"   :   "Os torniquetes deverão ser utilizados como um último recurso e, somente, para controlar os sangramentos provocados por ferimentos graves nas extremidades, quando todos os outros métodos de controle falharem.",
        },
        {
            "question"      :   "3: O que significa DNV?",
            "image"         :   "",
            "choices"       :   [
                                    "Distúrbio Neuro-Vascular",
                                    "Doença Neurovegetativa",
                                    "Doença do Nervo Vagu",
                                    "Disúrbio Neurovegetativo"
                                ],
            "correct"       :   "Disúrbio Neurovegetativo",
            "explanation"   :   "Distúrbio neurovegetativo é um transtorno psicológico no qual o paciente atribui seus sintomas a um mau funcionamento de um sistema ou de órgão inervado e controlado pelo sistema neurovegetativo (autônomo) porém exames exaustivos não indicam nenhum problema significativo nesse sistema.",
        },
    ];
   
    var currentquestion = 0, score = 0, submt=true, picked;
    jQuery(document).ready(function($){
       
        function htmlEncode(value){
          return $(document.createElement('div')).text(value).html();
        }
       
        function addChoices(choices){
            if(typeof choices !== "undefined" && $.type(choices) == "array"){
                $('#choice-block').empty();
                for(var i=0;i<choices.length; i++){
                    $(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');                    
                }
            }
        }
        
        function nextQuestion(){
            submt = true;
            $('#explanation').empty();
            $('#question').text(quis[currentquestion]['question']);
            $('#pager').text('Pergunta ' + Number(currentquestion + 1) + ' de ' + quis.length);
            if(quis[currentquestion].hasOwnProperty('image') && quis[currentquestion]['image'] != ""){
                if($('#question-image').length == 0){
                    $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quis[currentquestion]['image']).attr('alt', htmlEncode(quis[currentquestion]['question'])).insertAfter('#question');
                } else {
                    $('#question-image').attr('src', quis[currentquestion]['image']).attr('alt', htmlEncode(quis[currentquestion]['question']));
                }
            } else {
                $('#question-image').remove();
            }
            addChoices(quis[currentquestion]['choices']);
            setupButtons();
        }

        function processQuestion(choice){
            if(quis[currentquestion]['choices'][choice] == quis[currentquestion]['correct']){
                $('.choice').eq(choice).css({'background-color':'#228B22'});
                $('#explanation').html('<strong>Correto!</strong> ' + htmlEncode(quis[currentquestion]['explanation']));
                score++;
            } else {
                $('.choice').eq(choice).css({'background-color':'#D92623'});
                $('#explanation').html('<strong>Incorreto.</strong> ' + htmlEncode(quis[currentquestion]['explanation']));
            }
            currentquestion++;
            $('#submitbutton').html('Próxima Pergunta »').on('click', function(){
                if(currentquestion == quis.length){
                    endQuiz();
                } else {
                    $(this).text('Verificar Resposta').css({'color':'#222'}).off('click');
                    nextQuestion();
                }
            })
        }

        function setupButtons(){
            $('.choice').on('mouseover', function(){
                $(this).css({'background-color':'#e1e1e1'});
            });
            $('.choice').on('mouseout', function(){
                $(this).css({'background-color':'#fff'});
            })
            $('.choice').on('click', function(){
                picked = $(this).attr('data-index');
                $('.choice').removeAttr('style').off('mouseout mouseover');
                $(this).css({'border-color':'#222','font-weight':700,'background-color':'#c1c1c1'});
                if(submt){
                    submt=false;
                    $('#submitbutton').css({'color':'#000'}).on('click', function(){
                        $('.choice').off('click');
                        $(this).off('click');
                        processQuestion(picked);
                    });
                }
            })
        }
        

        function endQuiz(){
            $('#explanation').empty();
            $('#question').empty();
            $('#choice-block').empty();
            $('#submitbutton').remove();
            $('#question').text("Você acertou " + score + " de " + quis.length + " perguntas.");
            $(document.createElement('h2')).css({'text-align':'center', 'font-size':'4em'}).text(Math.round(score/quis.length * 100) + '%').insertAfter('#question');


        }
  
        function init(){
       
            if(typeof quiztitle !== "undefined" && $.type(quiztitle) === "string"){
                $(document.createElement('h1')).text(quiztitle).appendTo('#frame');
            } else {
                $(document.createElement('h1')).text("quis").appendTo('#frame');
            }
          
            if(typeof quis !== "undefined" && $.type(quis) === "array"){
              
                $(document.createElement('p')).addClass('pager').attr('id','pager').text('Questão 1 de ' + quis.length).appendTo('#frame');
                //add first question
                $(document.createElement('h2')).addClass('question').attr('id', 'question').text(quis[0]['question']).appendTo('#frame');
                //add image if present
                if(quis[0].hasOwnProperty('image') && quis[0]['image'] != ""){
                    $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quis[0]['image']).attr('alt', htmlEncode(quis[0]['question'])).appendTo('#frame');
                }
                $(document.createElement('p')).addClass('explanation').attr('id','explanation').html(' ').appendTo('#frame');
            
                //questions holder
                $(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');
            
                //add choices
                addChoices(quis[0]['choices']);
            
                //add submit button
                $(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Verificar Resposta').css({'font-weight':700,'color':'#222','padding':'30px 0'}).appendTo('#frame');
            
                setupButtons();
            }
        }
        
        init();
    });
    </script>
    <style type="text/css" media="all">
        /*css reset */
        html,body,div,span,h1,h2,h3,h4,h5,h6,p,code,small,strike,strong,sub,sup,b,u,i{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;} 
        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} 
        body{line-height:1; font:normal 0.9em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;} 
        ol,ul{list-style:none;}
        strong{font-weight:700;}
        #frame{max-width:620px;width:auto;border:1px solid #ccc;background:#fff;padding:10px;margin:3px;}
        h1{font:normal bold 2em/1.8em "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:left;border-bottom:1px solid #999;padding:0;width:auto}
        h2{font:italic bold 1.3em/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;padding:0;text-align:center;margin:20px 0;}
        p.pager{margin:5px 0 5px; font:bold 1em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;color:#999;}
        img.question-image{display:block;max-width:250px;margin:10px auto;border:1px solid #ccc;width:100%;height:auto;}
        #choice-block{display:block;list-style:none;margin:0;padding:0;}
        #submitbutton{background:#5a6b8c;}
        #submitbutton:hover{background:#7b8da6;}
        #explanation{margin:0 auto;padding:20px;width:75%;}
        .choice-box{display:block;text-align:center;margin:8px auto;padding:10px 0;border:1px solid #666;cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
    </style>
</head>
<body>
        <div id="frame" role="content">  </div>
</body>
</html>

Deixei o código completo, caso vocês queiram testar também ou precisem usar. É um quis bem legal. Mas a função importante mesmo daí é a function endQuiz() (eu acho).
(não sei bem o motivo, mas o "quis" foi corrigido para "quis" eu muitos lugares. Desculpem).
Muitíssimo obrigada!

makotsunami · 28 de setembro de 2018

Boa tarde, tudo certo/

Você deve ter uma Servlet que recebe uma requisição POST e processa essa requisição. Então, utilizando JavaScript, você consegue enviar uma requisição para essa servlet.

Isso é um AJAX com o JavaScript moderno. Tem outras maneiras de fazer também, inclusive utilizando JQuery.

fetch('http://localhost:0000/SuaServlet', {
	method: 'POST',
	headers: {
		'Accept': 'application/json, text/plain, */*',
		'Content-Type': 'application/json'
 	},
	body: JSON.stringify({
    		score: score
    	})
}).then(() => {
	alert('Score cadastrado com sucesso.');
})
.catch(error => {
	alert('Ocorreu um erro ao cadastrar seu score:' + error);
});

Ana Grossi · 28 de setembro de 2018

@makotsunami

Olá! Obrigada pela sua resposta! Mas não consegui fazer funcionar... Coloquei o código que você escreveu aqui na function endQuiz() assim:

function endQuiz(){
            $('#explanation').empty();
            $('#question').empty();
            $('#choice-block').empty();
            $('#submitbutton').remove();
            $('#question').text("Você acertou " + score + " de " + quis.length + " perguntas.");
            $(document.createElement('h2')).css({'text-align':'center', 'font-size':'4em'}).text(Math.round(score/quis.length * 100) + '%').insertAfter('#question');
        
            fetch('http://localhost:8080/CadastrarQuiz', {
                    method: 'POST',
                    headers: {
                            'Accept': 'application/json, text/plain, */*',
                            'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                            score: score
                    })
            }).then(() => {
                    alert('Score cadastrado com sucesso.');
            })
            .catch(error => {
                    alert('Ocorreu um erro ao cadastrar seu score:' + error);
            });
        }

Aí quando termina o jogo, ele aparece a alert('Score cadastrado com sucesso.'); mas não cadastrou nada.

Meu Servlet está assim:

@WebServlet(name = "CadastrarQuiz", urlPatterns = {"/CadastrarQuiz"})
public class CadastrarQuiz extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
      String pontosQuiz = request.getParameter("score");
      String perguntasQuiz="3";
        
        String mensagem = null;

        quis quis = new quis();
        quis.setPontosQuiz(pontosQuiz);
        quis.setPerguntasQuiz(perguntasQuiz);
        
        try {
            QuizDAOImpl dao = new QuizDAOImpl();
            if (dao.cadastrar(quis)) {
                mensagem = "Cadastrado com sucesso!";
            } else {
                mensagem = "Problemas ao cadastrar quis!";
            }
            request.setAttribute("mensagem", mensagem);
            request.getRequestDispatcher("quis.jsp").forward(request, response);
        } catch (Exception ex) {
            System.out.println("Problemas ao cadastrar quis! Erro:" + ex.getMessage());
            ex.printStackTrace();
        }
    }