如何使用AJAX将PHP响应返回到HTML页面

舍里

我正在尝试学习Web应用程序,在这里我的客户端使用HTML,服务器基于PHP。我从客户端进行注册,在注册时单击并单击提交按钮,然后使用jQuery AJAX将其发送到PHP页面。因此,在使用AJAX将表单数据发送或POST到PHP页面之后,会进行一些验证,例如检查用户名和电子邮件,如果验证成功,则应将JSON对象发送回我的HTML页面“ SUCCESS”,如果验证失败“错误”。

所以,问题是当我提交表单时,它会将我重定向到PHP页面,而不是在html上显示JSON响应。

自上周以来,我一直试图解决此问题,并且我对堆栈溢出,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不在同一文件夹或目录中。谢谢。

舍里

我用以下脚本解决了该问题,希望对您有所帮助。我尝试过的所有脚本的问题是,它们没有XMLHttpRequest权限来发布数据并从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">

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在脚本完成之前将响应从php返回到ajax

来自分类Dev

如何将数组从php返回到javascript中的ajax响应

来自分类Dev

执行php脚本后如何将mysql查询结果返回到html页面?

来自分类Dev

如何将数据从 PHP 返回到 ajax 函数

来自分类Dev

使用ajax将mysql结果返回到php

来自分类Dev

将PHP中的多个重复键返回到json AJAX响应

来自分类Dev

从php文件将json返回到ajax

来自分类Dev

将数组从 PHP 返回到 jQuery 从 Ajax

来自分类Dev

如何将AJAX响应显示为HTML页面?

来自分类Dev

如何将AJAX响应显示为HTML页面?

来自分类Dev

如何让poltergeist / PhantomJS延迟将页面返回到Capybara,直到加载AJAX?

来自分类Dev

如何让poltergeist / PhantomJS延迟将页面返回到Capybara,直到加载AJAX?

来自分类Dev

如何使用 Alamofire Swift 3 将响应结果返回到函数

来自分类Dev

想要使用laravel(或常规PHP)成功将字符串从PHP返回到AJAX

来自分类Dev

如何将特定数据从php返回到jquery ajax?

来自分类Dev

使用Python中的Graph API将Facebook页面的点赞次数返回到我的.html页面

来自分类Dev

如何显示从php页面返回到jquery的错误弹出

来自分类Dev

如何使用include函数通过php变量将数据库查询的结果返回到另一个页面

来自分类Dev

将PHP数组返回到javascript wihout Ajax,可能吗?

来自分类Dev

无法将数组从 php 函数返回到 ajax 请求

来自分类Dev

如何将JSON结果返回到Ajax.BeginForm

来自分类Dev

ajax调用如何将数据返回到变量?

来自分类Dev

如何将JSON结果返回到Ajax.BeginForm

来自分类Dev

如何从Google Appscript .gs将jdbcResultSet返回到html文件

来自分类Dev

如何将数组从PHP返回到Javascript

来自分类Dev

如何将数组从ac#dll返回到php

来自分类Dev

如何在不刷新的情况下将mysql数据返回到网页(ajax / jquery / php / mysql)

来自分类Dev

使用ajax将数据发送到php页面并获取响应并在字段中显示

来自分类Dev

使用按钮单击以将结果返回到PHP

Related 相关文章

  1. 1

    在脚本完成之前将响应从php返回到ajax

  2. 2

    如何将数组从php返回到javascript中的ajax响应

  3. 3

    执行php脚本后如何将mysql查询结果返回到html页面?

  4. 4

    如何将数据从 PHP 返回到 ajax 函数

  5. 5

    使用ajax将mysql结果返回到php

  6. 6

    将PHP中的多个重复键返回到json AJAX响应

  7. 7

    从php文件将json返回到ajax

  8. 8

    将数组从 PHP 返回到 jQuery 从 Ajax

  9. 9

    如何将AJAX响应显示为HTML页面?

  10. 10

    如何将AJAX响应显示为HTML页面?

  11. 11

    如何让poltergeist / PhantomJS延迟将页面返回到Capybara,直到加载AJAX?

  12. 12

    如何让poltergeist / PhantomJS延迟将页面返回到Capybara,直到加载AJAX?

  13. 13

    如何使用 Alamofire Swift 3 将响应结果返回到函数

  14. 14

    想要使用laravel(或常规PHP)成功将字符串从PHP返回到AJAX

  15. 15

    如何将特定数据从php返回到jquery ajax?

  16. 16

    使用Python中的Graph API将Facebook页面的点赞次数返回到我的.html页面

  17. 17

    如何显示从php页面返回到jquery的错误弹出

  18. 18

    如何使用include函数通过php变量将数据库查询的结果返回到另一个页面

  19. 19

    将PHP数组返回到javascript wihout Ajax,可能吗?

  20. 20

    无法将数组从 php 函数返回到 ajax 请求

  21. 21

    如何将JSON结果返回到Ajax.BeginForm

  22. 22

    ajax调用如何将数据返回到变量?

  23. 23

    如何将JSON结果返回到Ajax.BeginForm

  24. 24

    如何从Google Appscript .gs将jdbcResultSet返回到html文件

  25. 25

    如何将数组从PHP返回到Javascript

  26. 26

    如何将数组从ac#dll返回到php

  27. 27

    如何在不刷新的情况下将mysql数据返回到网页(ajax / jquery / php / mysql)

  28. 28

    使用ajax将数据发送到php页面并获取响应并在字段中显示

  29. 29

    使用按钮单击以将结果返回到PHP

热门标签

归档