Get a variable in JS and pass it to a class in PHP using Ajax with Jquery

0

I need to create a project that consumes an api with json data, I created the interface, but at the time I get the result and send it to a class in php, but when I hit the submit button, nothing happens. What will it be? I saw some posts about this, but I could not get out of this problem, I'm a beginner, and I would like to know if anyone can help me in this matter.

<nav class="grid-12 header_menu">
   <form class="pesquisa-cidade" method="post" action="">
      <input id ="cidade" name="cidade" type="text">
      <input id="enviar" name="enviar" type="submit" class="btn">
   </form>
</nav>

Javascript

 $(document).ready(function(){
       $("#enviar").click(function(){
         var cidade = $('#cidade').val();

         $.post("",{cidade: cidade}, function(data){
           console.log("Sucesso: "+data[0]);
         },'json').error(function(){
             alert("Erro!");
         });
     });
 })
    
asked by anonymous 14.10.2018 / 03:52

2 answers

0

I imagine you already have this PHP class implemented and that has some method like tratarCidade() , for example. In this case, if you are not already working with routes and controllers (and I imagine not), there must be an action file that receives the form data and invokes the method of its class. We'll call this file cidade.action.php and it looks like this:

<?php
    include('MinhaClasse.php');
    $cidade = $_POST['cidade'];
    $objeto = new MinhaClasse();        
    $resposta = $objeto->tratarCidade($cidade);

    header("Access-Control-Allow-Origin: *");
    header('Content-type:application/json;charset=utf-8');
    echo json_encode($resposta, JSON_UNESCAPED_UNICODE);
?>

The first header allows requests to be made from any source. Below, we're printing the answer in JSON so you do not have trouble handling the data on the other side with JavaScript.

The first parameter of the $.post() method should be the URL of your application where you will process the request and invoke the method of your PHP class. In this case, the cidade.action.php itself:

 $(document).ready(function(){
       $("#enviar").click(function(){
         var cidade = $('#cidade').val();

         $.post("http://localhost/seuprojeto/cidade.action.php",
             {cidade: cidade}, function(data){
           console.log("Sucesso: "+data[0]);
         },'json').fail(function(){
             alert("Erro!");
         });
     });
 })

You also said that nothing happens when you hit the send button. Note that the default action of a input type="submit" element sends an HTTP request and causes your page to be updated. To prevent the default action of the button, your .js might look like this:

 $(document).ready(function(){
     $("form").submit(function(e){
        e.preventDefault();
     });


     $("#enviar").click(function(){
         var cidade = $('#cidade').val();

         $.post("http://localhost/seuprojeto/cidade.action.php",
             {cidade: cidade}, function(data){
           console.log("Sucesso: "+data[0]);
         },'json').fail(function(){
             alert("Erro!");
         });
     });
 })
    
14.10.2018 / 04:56
0

The first argument of $ .post is the address of your request, but you are passing only an empty string. It would have to be something like "localhost: 3000 / cities /". Check which port your server is, and which id of your web service, and put them in the address.

    
14.10.2018 / 04:32