我的Ajax表单不起作用

时间:2017-01-15 14:32:34

标签: javascript php jquery ajax

我无法弄清楚为什么我的ajax表格不起作用,我现在已经摸不着头脑了。为了使它更容易我的JavaScript代码在忘记密码部分。控制台没有任何输出,页面也没有刷新,所以我不知道什么是错的?结果应该显示在<p id="msg"><p/>

login2.php代码:

<?php

$data = array();
 if(isset($_POST['email'])){
 $data = $_POST['email'];       
 echo json_encode($data);  
 die();      
}
?>
<!DOCTYPE html>
<html lang="en">
    <!--[if IE 9 ]><html class="ie9"><![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sign In</title>

        <!-- Vendors -->

        <!-- Animate CSS -->
        <link href="vendors/bower_components/animate.css/animate.min.css" rel="stylesheet">

        <!-- Material Design Icons -->
        <link href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <!-- Site CSS -->
        <link href="css/app-1.min.css" rel="stylesheet">
    <script src='/google_analytics_auto.js'></script></head>

    <body>
        <div class="login">

            <!-- Login -->
            <div class="login__block toggled" id="l-login">
                <div class="login__block__header">
                    <i class="zmdi zmdi-account-circle"></i>
                    Hi there! Please Sign in

                    <div class="actions login__block__actions">
                        <div class="dropdown">
                            <a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>

                            <ul class="dropdown-menu pull-right">
                                <li><a data-block="#l-register" href="">Create an account</a></li>
                                <li><a data-block="#l-forget-password" href="">Forgot password?</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="login__block__body">
                    <div class="form-group form-group--float form-group--centered form-group--centered">
                        <input type="text" class="form-control">
                        <label>Email Address</label>
                        <i class="form-group__bar"></i>
                    </div>

                    <div class="form-group form-group--float form-group--centered form-group--centered">
                        <input type="password" class="form-control">
                        <label>Password</label>
                        <i class="form-group__bar"></i>
                    </div>

                    <button class="btn btn--light btn--icon m-t-15"><i class="zmdi zmdi-long-arrow-right"></i></button>
                </div>
            </div>


            <!-- Forgot Password -->
            <div class="login__block" id="l-forget-password">
                <div class="login__block__header palette-Purple bg">
                    <i class="zmdi zmdi-account-circle"></i>
                    Forgot Password?

                    <div class="actions login__block__actions">
                        <div class="dropdown">
                            <a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>

                            <ul class="dropdown-menu pull-right">
                                <li><a data-block="#l-login" href="">Already have an account?</a></li>
                                <li><a data-block="#l-register" href="">Create an account</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="login__block__body">
                <form>
                    <p class="m-t-30">Lorem ipsum dolor fringilla enim feugiat commodo sed ac lacus.</p>

                    <div class="form-group form-group--float form-group--centered">
                        <input type="text" class="form-control" id="emailfield">
                        <label>Email Address</label>
                        <i class="form-group__bar"></i>
                        </form>
                        <p id="msg"><p/>
                    </div>
                    <button class="btn btn--light btn--icon m-t-15" value="submit" type="submit"><i class="zmdi zmdi-check"></i></button>
                </div>
            </div>
            <script type = "text/javascript">

    $("form").on("submit", function(e){

        e.preventDefault();
        var emailfield = $("#emailfield").val();
        var email ='email='+ emailfield;

        $.ajax({
            url: "login2.php",
            method: "POST",
            dataType: "json",
            data: {email: email},
            success: function (result) {
                alert("result: " + result);
                console.log(result);
                $("#msg").html(result);
            }
        });
    });

</script>
        </div>

        <!-- Older IE Warning -->
        <!--[if lt IE 9]>
            <div class="ie-warning">
                <h1>Warning!!</h1>
                <p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p>
                <div class="ie-warning__container">
                    <ul class="ie-warning__download">
                        <li>
                            <a href="http://www.google.com/chrome/">
                                <img src="img/browsers/chrome.png" alt="">
                                <div>Chrome</div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.mozilla.org/en-US/firefox/new/">
                                <img src="img/browsers/firefox.png" alt="">
                                <div>Firefox</div>
                            </a>
                        </li>
                        <li>
                            <a href="http://www.opera.com">
                                <img src="img/browsers/opera.png" alt="">
                                <div>Opera</div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.apple.com/safari/">
                                <img src="img/browsers/safari.png" alt="">
                                <div>Safari</div>
                            </a>
                        </li>
                        <li>
                            <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
                                <img src="img/browsers/ie.png" alt="">
                                <div>IE (New)</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <p>Sorry for the inconvenience!</p>
            </div>
        <![endif]-->


        <!-- Javascript Libraries -->

        <!-- jQuery -->
        <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>

        <!-- Bootstrap -->
        <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

        <!-- Placeholder for IE9 -->
        <!--[if IE 9 ]>
            <script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
        <![endif]-->

        <!-- Site Functions & Actions -->
        <script src="js/app.min.js"></script>
    </body>
</html>

2 个答案:

答案 0 :(得分:0)

 please try this and open Network Tab to see if request is going correctly and your backend is getting hit with this call   .

  $("form").on("submit", function(e){

    e.preventDefault();
    var emailfield = $("#emailfield").val();
    var email ='email='+ emailfield;


    $.ajax({
        url: "login2.php",
        method: "POST",
        dataType: "json",
        data: JSON.stringify(email),
        success: function (result) {
            alert("result: " + result);
            console.log(result);
            $("#msg").html(result);
        }
    });
});

答案 1 :(得分:-1)

使用json或普通key = value

所以在ajax中改变

 data: email,

返回类型是json所以它应该是Json而不是没有键的字符串它只是带有.php返回的引号的字符串。

从ajax中删除dataType: "json",并返回字符串作为.php返回值。或者在key

中加入json_encode

以json更改为止返回

 $data["email"] = $_POST['email'];