Wywoływanie pliku PHP przy użyciu AJAX

Question

Próbuję wywołać plik php za pomocą funkcji $ .ajax() w jQuery, ale nie działa. Poniższy kod jest uruchamiany, gdy przycisk na stronie kliknięciu:

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

To moja 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> 

mam ustawić formularz na onClick do return false tak, że forma nie odświeżyć stronę po jej przesłaniu, aby mogła działać jQuery.

Każda pomoc jest bardzo doceniana.

Answer 1

głównym powodem dlaczego ludzie używają formy jest tak, że można zdefiniować

działania (w przypadku skrypt php),

Metoda (GET lub POST) i przycisk przesyłają wszystkie informacje w formularzu i automatycznie wysyłają je do serwera.

To dobrze, gdy masz 20-30 wejść lub obsługujesz wiele wejść plików. W twoim przypadku obchodzenia się odzyskiwanie danych w ajax funkcji, nie masz złożyć przycisk, działanie lub metoda zdefiniowana więc można zrobić rzeczy o wiele łatwiej przez nie za pomocą formularza na wszystko ....

$.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)); 
    }); 

Zostawiłam na DIV formatowania prostocie ...

<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"> 

powyższy kod przechwyci dane w wejściach, wysłać go do skryptu php i wyprowadzania danych, który jest wysyłany z powrotem ze skryptu php w alert.

Co najważniejsze Twoja strona NIE odświeży się!

Answer 2

Spróbuj następujący kod:

$(".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... 
     } 
    }); 
}); 

Należy pamiętać, że nie masz przycisk Prześlij na formularzu. Więc return false jest bezużyteczna ..

Answer 3

W rzeczywistości serializuje moje dane formularza, ponieważ jest to mniej kodu. Dodatkowo możesz go używać z wieloma formularzami. Na przykład możesz mieć ukryte dane wejściowe, które zawierają numer zadania i jeden skrypt php do delegowania zadań. Lub możesz mieć inną zmienną dla funkcji submit, aby przekazać lokalizację swojego skryptu. Dlatego przedstawiam moje formularze w następujący sposób.

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); 
     } 
    }); 

}