Chiamare il file PHP usando AJAX

Question

Sto provando a chiamare un file php usando la funzione $ .ajax() in jQuery ma non funziona. Il seguente codice viene eseguito quando un pulsante sulla pagina viene cliccato:

if($error === false) { 
     alert($error); 
     $.ajax({ 
      url: '/new-user.php', 
      type: 'POST', 
      data: { 
       name: $('#name').val(), 
       email: $('#name').val(), 
       password: $('#name').val() 
      } 
     }); 

Questa è la mia forma:

<form onClick="return false;" class="reg-form"> 

    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="name">First Name</label> 
       <input type="text" id="name" class="form-control" autofocus="autofocus"> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="email">Email Address</label> 
       <input type="text" id="email" class="form-control"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="password">Password</label> 
       <input type="password" id="password" class="form-control"> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="password-confirm">Confirm Password</label> 
       <input type="password" id="password-confirm" class="form-control"> 
      </div> 
     </div> 
    </div> 

    <button class="btn trans reg-btn">Sign Up</button> 

    <div class="reg-msg"> 
     <span id="password-error-msg">Passwords do not match.</span> 
    </div> 

</form> 

ho posto del form onClick per tornare false in modo che la forma non ricaricare la pagina inviata quando è possibile eseguire jQuery.

Qualsiasi aiuto è molto apprezzato.

Answer 1

Il motivo principale per cui le persone utilizzano forme è così che si può definire un

azione (nel tuo caso uno script PHP),

metodo (GET o POST) e uno

inviare il pulsante che acquisisce tutte le informazioni nel modulo e lo invia automaticamente al server.

Questo è utile quando si hanno 20-30 ingressi o si gestiscono più input di file. Nel tuo caso si sta gestendo il recupero dei dati nella funzione ajax, non avete pulsante di invio, azione o metodo definito così si potrebbe rendere le cose molto più facile non usando una forma a tutti ....

$.ajax({ 
     url: '/new-user.php', 
     type: 'POST', 
     dataType: "json", 
     data: { 
      name: $('#name').val(), 
      email: $('#email').val(), 
      password: $('#password').val() 
     } 
    }).done(function(data){ 
      alert(JSON.stringify(data)); 
    }); 

ho lasciato i div di formattazione per la semplicità ...

<input type="text" id="name" class="form-control" autofocus="autofocus"> 
<input type="text" id="email" class="form-control"> 
<input type="password" id="password" class="form-control"> 

il codice qui sopra afferrare i dati nei ingressi, inviare allo script e l'uscita php i dati che vengono inviati indietro dal vostro script php in l'avviso.

E, soprattutto, la pagina NON verrà aggiornata!

Answer 2

Si prega di provare il seguente codice:

$(".reg-btn").click(function(e) 
{ 
    e.preventDefault(); 
    $.ajax({ 
     url: '/new-user.php', 
     type: 'POST', 
     data: { 
      name: $('#name').val(), 
      email: $('#name').val(), 
      password: $('#name').val() 
     }, 
     success:function(response){ 
      //Do something here... 
     } 
    }); 
}); 

prega di notare che non si dispone di un pulsante di invio sul modulo. Così return false è di alcuna utilità ..

Answer 3

In realtà serializzo i dati del mio modulo perché è meno codice. Inoltre puoi usarlo con più forme. Ad esempio, puoi avere un input nascosto che contiene un numero di attività e uno script php per delegare le attività. Oppure puoi avere un'altra variabile per la funzione di invio per passare la posizione del tuo script. Pertanto invio i miei moduli come il seguente.

HTML:

<form onsubmit="submitForm('#myForm'); return false;" id='myForm'> 
    <input type='text' name='name'/> 
    <input type='text' name='email'/> 
    <input type='text' name='password'/> 
    <input type='submit'/> 
</form> 

Javascript:

function submitForm(formId){ 
    var formData = $.(formId).serialize(); 

    $.ajax({ 
     url: '/script.php', 
     type: 'POST', 
     data: formData, 
     success:function(response){ 
      alert(response); 
     } 
    }); 

}