Как вернуть PHP-ответ на HTML-страницу с помощью AJAX

Question

Я пытаюсь изучить веб-приложения, здесь у меня есть клиентская сторона, использующая HTML и сервер на основе PHP. У меня есть аккаунт на моей стороне клиента, который при заполнении и нажатии кнопки отправки отправляется на страницу PHP с помощью jQuery AJAX. Итак, после отправки данных формы или отправки POST на страницу PHP с использованием AJAX выполняется несколько проверок, таких как проверка имени пользователя и электронной почты, если проверки правильны, следует отправить обратно объект JSON на мою HTML-страницу «УСПЕХ», если проверка не завершена "Ошибка".

Итак, проблема заключается в отправке формы, которая перенаправляет меня на страницу PHP вместо отображения ответа JSON на мой html.

Я пытался решить эту проблему с прошлой недели, и я отфильтровал переполнение стека, youtube и многие другие сайты для решения, которое не пошло хорошо.

Вот код

PHP:

<?php include ("./inc/connect.inc.php"); 
header("Content-type: application/javascript"); 
header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Methods: POST, GET"); 

session_start(); 
if (isset($_SESSION['user_login'])) { 
    $user = $_SESSION["user_login"]; 
} 
else 
{ 
    $user = ""; 
} 
?> 

<?php 
$registration = @$_POST['signup-submit']; 

$fname = @$_POST['fname']; 
$lname = @$_POST['lname']; 
$uname = @$_POST['uname']; 
$email = @$_POST['email']; 
$email_repeat = @$_POST['email_repeat']; 
$password = @$_POST['password']; 

$ucheck_array = array('Username Takne'); 
$echeck_array = array('Email already used'); 
$siginup_sucess_array = array('Sucess'); 

//Sign-Up form validation 
if ($registration) {  
$usernamecheck = mysql_query("SELECT * FROM users WHERE username='$uname' "); 
$usernamecount = mysql_num_rows($usernamecheck); 
$emailcheck = mysql_query("SELECT * FROM users WHERE email='$email' "); 
$emailcount = mysql_num_rows($emailcheck); 
if ($usernamecount == 0 && $emailcount == 0) { 
    $squery = mysql_query("INSERT INTO users VALUES ('','$uname','$fname','$lname','$dob','$location','$email','$password','$date','0','','','','','','no')"); 
     echo json_encode($siginup_sucess_array); 
}  
else { 
    if ($usernamecount == 1) { 
     echo json_encode($ucheck_array); 
    } 
    else if ($emailcount == 1) { 
     echo json_encode($echeck_array); 
    } 
} 
} 

HTML форма:

<form id="register-form" class="animated fadeInRight" action="http://localhost/Exercises/AJAX/df.php" method="post" role="form" style="display: none;"> 
    <div class="form-group"> 
     <input type="text" name="fname" id="fname" placeholder="First Name" value="" autofocus> 
    </div> 
    <div class="form-group"> 
     <input type="text" name="lname" id="lname" tabindex="1" class="form-control" placeholder="Last Name" value=""> 
    </div> 
    <div class="form-group"> 
     <input type="text" name="uname" id="uname" tabindex="1" class="form-control" placeholder="User Name" value=""> 
    </div> 
    <div class="form-group"> 
     <input type="text" name="dob" id="dob" placeholder="D-O-B" value=""> 
    </div> 
    <div class="form-group"> 
     <input type="text" name="location" id="location" tabindex="1" class="form-control" placeholder="Location" value=""> 
    </div> 
    <div class="form-group"> 
     <input type="email" name="email" id="email" placeholder="Email" value=""> 
    </div> 
    <div class="form-group"> 
     <input type="email" name="email_repeat" id="email_repeat" placeholder="Confirm Email" value=""> 
    </div> 
    <div class="form-group"> 
     <input type="text" name="password" id="password" tabindex="1" class="form-control" placeholder="Password" value=""> 
    </div> 
    <div class="form-group dob"> 
     <input type="text" name="date" id="date" placeholder="Date" value=""> 
    </div> 
    <p class="index_p">By creating the account you accept all the <span style="color: #4CAF50; font-weight: bold; text-decoration: underline;">Terms & Conditions.</span></p> 
    <div class="form-group"> 
     <div class="row"> 
      <div id="btn_signin" class="col-sm-6 col-sm-offset-3"> 
       <input type="submit" name="signup-submit" id="signup-submit" value="SIGN UP"> 
      </div> 
     </div> 
    </div> 
</form> 
<div id="signup-test"></div> //PHP response to be displayed here 

JS:

$("#signup-submit").click(function() { 
    $.post($("#register-form").attr("action"), 
     $("#register-form :input").serializeArray(), 
      function(signup_data){ 
       $("#signup-test").html(signup_data); 
      }); 
clearInput(); 
}); 

$("#register-form").submit(function() { 
    return false; 
}); 

function clearInput() { 
    $("#register-form :input").each(function() { 
     $(this).val(''); 
    }); 
} 

Чтобы быть ясным, я пробовал e.preventDefault, return false и многие другие сценарии, и мои PHP и HTML не находятся в одной папке или каталоге. Спасибо.

Answer 1

Я решил это со следующим сценарием, надеюсь, что это поможет кому-то. Проблема со всеми скриптами, которые я пробовал, у них нет XMLHttpRequest разрешение на данные POST и получение данных с PHP (на стороне сервера в моем случае).

Итак, XMLHttpRequest является обязательным для Ajax для получения или отправки данных «CROSS_DOMAIN».

Сценарий:

function signup(){ 
var firstname = document.getElementById("firstname").value; 
var lastname  = document.getElementById("lastname").value; 
var uname  = document.getElementById("uname").value; 
var email  = document.getElementById("email").value; 
var email_repeat = document.getElementById("email_repeat").value; 
var password  = document.getElementById("password").value; 

if (fname == "") { 
    document.getElementById("fname").style.background = "rgba(244,67,54,0.45)"; 
    document.getElementById("fnamestatus").innerHTML = "<p style='width: 30px; color: rgba(255, 62, 48, 0.9); font-size: 14px; font-weight: bold; margin-top:5px; margin-left: -40px; margin-bottom: 0px;'>2-25</p>";  
} 

else if (email != email_repeat){ 
    document.getElementById("email").style.background = "rgba(244,67,54,0.45)"; 
    document.getElementById("email_repeat").style.background = "rgba(244,67,54,0.45)"; 
    alert("Your email fields do not match"); 
} 

else { 
    var signup_ajax = new XMLHttpRequest(); 
    signup_ajax.open("POST", "URL which you want to post data", true); 
    signup_ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    signup_ajax.onreadystatechange = function() { 
     if (signup_ajax.readyState == 4 && signup_ajax.status == 200) { 
      if (signup_ajax.responseText = "Success"){ 
       alert("Account created"); 
      } 
      else if (signup_ajax.responseText = "Try again.") { 
       window.scrollTo(0,0); 
       alert("Try again."); 
      } 
     } 
    } 
    signup_ajax.send("fname=" +fname+ "&lname=" +lname+ "&uname=" +uname+ "&email=" +email+ "&email_repeat=" +email_repeat+ "&password=" +password); 
    } 
} 

PHP (я просто размещение основной PHP, вы всегда можете добавить столько валидаций, как вам нужно):

if(isset($_POST["uname"])) { 

$fname = @$_POST['firstname']; 
$lname = @$_POST['lastname']; 
$uname = @$_POST['uname']; 
$email = @$_POST['email']; 
$email_repeat = @$_POST['email_repeat']; 
$password = @$_POST['password']; 

//Sign-Up form validation 
if($_POST) { 
    $squery = mysql_query("INSERT INTO users VALUES ('','$uname','$fname','$lname','$email','$password')"); 
     echo 'Sucess'; 
}  
else 
    echo 'Try again.'; 
} 

только изменить то, что я сделал, чтобы мой HTML Форма является:

<input type="button" name="signup-submit" id="signup-submit" class="form-control btn btn-signup" onclick="signup()" tabindex="4" value="SIGN UP"> 

Answer 2

Попробуйте использовать более гибкий jQuery ajax. Я использую эту версию, если ajax, потому что я могу изменить ее, чтобы получить и опубликовать очень легко. Я проверил этот метод, и он работает с формой:

<script> 
function clearInput() { 
    $("#register-form :input").each(function() { 
     $(this).val(''); 
    }); 
} 
$(document).ready(function() { 
    $("#register-form").submit(function(e) { 
     //console.log($(this).attr("action")); 
     $.ajax({ 
      url: $(this).attr("action"), 
      type: 'post', 
      data: $(this).serialize(), 
      success: function(response) 
       { 
        // console.log(response); 
        $("#signin-test").html(response); 
        clearInput(); 
       }, 
      error: function(response) 
       { 
        console.log(response); 
       } 
     }); 

     e.preventDefault(); 
    }); 
}); 
</script> 

Answer 3

Это может быть потому, что вы регулируете свою форму на основе поведения кнопки. Вы должны слушать событие onSubmit формы и не допускать обстрела.

$("#register-form").submit(function(e) { 
    e.preventDefault(); 
    $.post($("#register-form").attr("action"), 
     $("#register-form :input").serializeArray(), 
      function(signup_data){ 
       $("#signup-test").html(signup_data); 
      }); 
clearInput(); 
});