Ir ao conteúdo
  • Cadastre-se
mauricio baroni

Problema com ajax -jquery

Recommended Posts

Boa noite, sou novo no fórum e estou com algumas duvidas. Estou realizando um trabalho na faculdade no qual devo montar uma loja virtual. Os produtos já estão em um servidor fornecido pelo professor. A primeira parte do trabalho está feita, que era pegar os produtos do servidor e colocá-los no site, montando o layout. O problema está na segunda parte, onde preciso adicionar os produtos no carrinho, não sei como fazer isso :( . Deve ser feito com o AJAX. Espero que me ajudem, obrigado. (html em anexo).

 

código:

<DOCTYPE! html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<style type="text/css">

body{
    background-color: #2F4F4F;
}

#cabecalho{
    background-color: #8B4C39;
    top:0;
    position: fixed;
    width: 100%;
    left: 0px;
    font-size: 20px;
    color: #FFFFE0;
    font-family: ;
    display: inline;    
    display: fixed;
    z-index: 2;
}
#links{
    list-style: none;
    text-align: center;
    padding-right: 120px;
}
.link{
    display: inline;
    padding: 10px;
    background-color: #E9BE01;
    color: black;
    border:none;
    text-align: center;
    font-family: arial;
}
#produto,#inicio{
padding-top: 60px;
color: white;
width: 100%;
float: left;
text-align: center;
}
</style>

</head>
<body>
    <div id= "cabecalho" >
        <ul id="links">
            <input class="link" id="home" type= "button" value="TODOS OS PRODUTOS">
            <input class="link" id="cozinha" type= "button" value="COZINHA">
            <input class="link" id="quarto" type= "button" value="QUARTO">
            <input class="link" id="sala" type= "button" value="SALA">
            <input class="link" id="carrinho" type= "button" value="CARRINHO">
            
        </ul>
    </div>
    <div id="produto"> 

    </div>
    <div id="inicio"> 
        <h1>bem vindo ao site, clique nos botões acima para ser redirecionado a categoria desejada</h1>
    </div>
    <script type="text/javascript">    
        $(".link").click(function   () {
             var data;
            var id = $(this).attr('id');        //pega a id do botao
            if(id == "cozinha" ) {    
                $("#produto").empty();
                data =1;
                ajax();
            }else if (id=="quarto" ){
                $("#produto").empty();
                data=2;
                ajax();
            }else if (id =="sala" ) {
                $("#produto").empty();
                data=3;
                ajax();
            }else if (id =="home" ){
                 $("#produto").empty();
                for(var i=1;i<=3;i++){
                    data= i;
                    ajax();
                }
            }
            
        function ajax() { 
            
            
            $("#inicio").css("display","none");
            $.ajax({
                url: "http://********.com.br/loja/lojaVirtual.php",    
                method: "GET",
                dataType:"jsonp",
                data:{categoria: data},
                success: function(resposta){
                        
                        
                    for(var i=0; i<=resposta.length;i++ ) {
                    
                        
                        
                        $("#foto").css("margin-left", "50px");
                        $(".prod").css("border", "2px solid black");
                        $(".prod").css("width", "30%");
                        $(".prod").css("text-align", "center");
                        $(".prod").css("float", "left");
                        $(".prod").css("height", "60%");
                        $(".prod").css("margin-top", "10px");
                        $(".prod").css("overflow", "auto");
                        $(".prod").css("margin-left", "10px");
                        $(".prod").css("display","absolute");
                            //botao comprar
                        $(".comprar").css("padding", "5px");
                        $(".comprar").css("border", "none");
                        $(".comprar").css("background-color", "#077A24");
                        $(".comprar").css("color", "white");
        
                        var prodDaVez = "<div id= 'produto" +resposta.idProduto +" '>";
                        prodDaVez+= "<div class= 'prod'>";
                        prodDaVez +="<p >nome: " + resposta.nome + "</p>";
                        prodDaVez +="<img id='foto' width = '100' src='" + resposta.urlFoto + "'>";
                        prodDaVez +="<p > descricao: " + resposta.descricao + "</p>";
                        prodDaVez+= "<input class='comprar'' type= 'button' value='comprar'>"
                        prodDaVez+="</div>";
                        prodDaVez+="</div>";
                        $("#produto").append(prodDaVez);
                         
                    }
                },
                error: function(erro) {
                        console.log(erro);
                }
        
            });
        }

        })
    </script>

</body>
</html>

wwww.zip

wwww.zip

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@mauricio baroni Olá, seja bem vindo em nosso Fórum do Clube do Hardware.

 

Basicamente, um dos erros que vejo é que você está usando a versão 3.1.1 do jQuery mas está utilizando algumas funções antigas e obsoletas do $.ajax()

 

Troque o success  por  done()  depois da função.

 

exemplo:

$.ajax({
   //opcçoes
}).done(function(resposta){
    //faz algo se for bem sucedido 
}).fail(function(resposta){
    //faz outra coisa se der errado
});

Fora isso,  vejo outras coisas.. como o evento de click.  tente usar o ON()   ao invés do click()

 

Sobre seu carrinho, bom.. aqui eu diria que o ideal é você fazer com sessões e armazenar os produtos nele. Só que para isso você precisa criar um novo arquivo php  chamado carrinho.php que você chamará via ajax...  neste arquivo é recebido o produto e cria um vetor de produtos na sessão. Isso vai permitir que os produtos não se percam do carrinho ao fechar o "site".

Agora deixo uma pergunta.  É necessário que os produtos sejam inseridos com javascript?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×