Problema com ajax -jquery

mauricio baroni · 27 de novembro de 2016

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

DiF · 27 de novembro de 2016

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