I cannot create a new client on the server

Asked

Viewed 39 times

0

Good evening, I’m a student of JS, html. I’m trying to learn how I can make an inclusion on the server ( I’m sorry if I describe with the incorrect word or term any step). I have to create a website to make a CRUD on the server. I have to implement the JAVA SCRIPT Update,Create,Delete,Read. However, I’ve already done READ and DELETE. I’m trying to do CREATE. But I don’t think I know any content. I’ve done enough research and I can’t include anything in the Server.

I’m gonna break my code:

<!DOCTYPE html>
<html><script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<body>
<h2>Tabela De Clientes</h2>
<form id="formularioId">
Nome do cliente:<input type="text" id="form">
uf: <input type="text" id="form" >
Renda Mensal: <input type="text" id="form" >
<button type="submit" id="criarId">Criar</button>
</form>
<br><br> <button type="button" id=tabela>Tabela</button>  
<br><br>
Resultado:<br>
<p id="listaCliente" ></p>
<script>
var url="httpEndereço";
$(document).ready(function(){
$("#tabela").click(function(){
$.get("https://clienteweb2017.000webhostapp.com/crud_ajax_json/
getDadosClientes.php")
    .done(function(data,status){
        var obj = JSON.parse(data);
        console.log(obj);
        montarTabela(obj);
        })

    .fail(function(){
    alert("Problema de conexão");
    });


    });
 function montarTabela(obj){
  var i;

  //console.log (response.responseXML);

  //var xmlDoc = response.responseXML;  

  var table="<table border=1  style=border-collapse:'collapse';><tr> 
  <th>Id</th><th>Nome</th><th>uf</th><th>Renda Mensal</th><th>remover</th> 
  </tr>";

  //var x = xmlDoc.getElementsByTagName("ALBUM");

   for (n of obj.data) { 
   table += "<tr><td>" + n.id +"</td><td>" +n.nome +
   "</td><td>" + n.uf +"</td><td>" + n.rendamensal+"</td><td><a 
    href='#'class='excluir'>remover</a></td></tr>";
   }
   $("#listaCliente").html(table);
   }
    $("body").on("click", ".excluir",function(){

    var Cid=$(this).parent().siblings(0).html();


   $.get("https://clienteweb2017.000webhostapp.com/crud_ajax_json/
   deleteCliente.php?id="+Cid)
    .done(function(){
        //alert("Removido!!!");
        })

    .fail(function(){
    alert("Problema de conexão");
    });
    });
    });//Fim da Ready
    var xhttp=new XMLHttpRequest();
    $(document).ready(function(){

     $("body").on("click", "#criarId",function(){

    var criacao=$('#formularioId');
    $.get("https://clienteweb2017.000webhostapp.com/crud_ajax_json/
    createCliente.php?nome="+criacao)
      .done(function(){
         //alert("Removido!!!");
            })

      .fail(function(){
       alert("Problema de conexão");
       });
        xhttp.send();
       });
        });//Fim da Ready
   </script>
   </body>
javascript ajax

1 answer

1


How is the user table structure? And it helped tb see createCliente.php. When working by AJAX, you should always be aware of the Network (Network) tab of the browser console, however, you are apparently sending the form and not only the value of the 'name' input. Furthermore, all form fields have the same id and should not.

<form id="formularioId">
Nome do cliente:<input type="text" **id="form"**>
uf: <input type="text" **id="form"** >
Renda Mensal: <input type="text" **id="form"** >
<button type="submit" id="criarId">Criar</button>
</form>

It should be, for example:

<form id="formularioId">
Nome do cliente:<input type="text" id="nomeCliente">
uf: <input type="text" id="ufCliente" >
Renda Mensal: <input type="text" id="rendaCliente" >
<button type="submit" id="criarId">Criar</button>
</form>

Thus, via javascript:

var criacao=$('#nomeCliente').val();
    $.get("https://clienteweb2017.000webhostapp.com/crud_ajax_json/
    createCliente.php?nome="+criacao)
      .done(function(){
         //alert("Removido!!!");
            })

      .fail(function(){
       alert("Problema de conexão");
       });
        xhttp.send();
});

Finally, do you have to use GET to place orders? POST would be much better - reasonably safer.

  • 1-I have not studied about "POST" in Xmlhttprequest. That’s why I have to do it by "GET". 2- This "id" topic has helped a lot. Thank you. Finally, I would like to understand something. With this line: var criacao=$('#customer name'). val(); I can get the POST data correctly?

  • 1

    In this case, it will only fetch the value of the client name field, to fetch the whole info: var creation=$('#client name'). val(); var ud=$('#ufCliente'). val(); and var renda=$('#rendaCliente'). val();

  • It is because it continues to fail. It enters the ". fail()" and opens the Alert I left there.

  • 1

    This can be something else... Put Answer to be passed to the done function, type . done(Function(Response){ console.log(Response);}). fail bla bla bla, and see what the browser spits on the console and the Network or Network tab...

  • Had no results on the console.

  • 1

    What about the Network tab? Filter by XHR requests. You may not find the URL of the request, you may find the file until it is under a different name than createCliente, the upload may have gone wrong and the file incomplete, etc... It could be an error in PHP or the insertion query itself... Anything, post here the php code of createCliente.php

  • Now I’m able to include but I’m having problems because it keeps giving a problem of connection. Is there something I should look for ? Type I looked at the network(network) as requested, I looked at the console and the error is not showing! I’m sorry but I’m a beginner and that’s why I’m having so many doubts.

  • 1

    In fact, it even happens to pros, so don’t worry :) it doesn’t trigger any errors on the console, or jquery? What if instead of $("body"). on("click", "#creatId",Function(){ for only $("#creatId"). on("click", Function(){ ??

  • I was able to fix the code in the meantime. Now it is inserting, removing and showing. I’m trying to study how I can edit or update the programs. If you want I can post the current code here for you to see.

  • 1

    Good! If it’s working you don’t need to post the code. The editing mechanics will take more work and will require more attention. Good work and good luck :)

Show 5 more comments

Browser other questions tagged javascript ajax

You are not signed in. Login or sign up in order to post.