Javascript AJAX POST响应

时间:2016-02-28 01:17:23

标签: javascript php jquery ajax

我希望你们一切顺利!

我有一个问题,我无法解决。 我有以下脚本,它适用于"空白"带引导程序的页面:

的index.php

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="css/jquery.modal.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN -->


    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- load jquery via CDN -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="js/jquery.modal.js"></script>
    <script src="js/jquery-1.7.1.js"></script>
    <script src="js/jquery.form.min.js"></script>
    <script src="js/jquery.reveal.js"></script>

    <script type="text/javascript">
    $(document).ready(function () {

        var options = {
            url: "include/form_process.php", // where to submit form to
            type: "post", // submit method
            dateType: "html", // returned dataType
            success: showResponse // function to call on successful form submittion
        };

        // bind form using 'ajaxForm' 
        $('#createForm').ajaxForm(options);


    });

    function showResponse(responseText) {
        console.log('success');
        $('#main-wrapper').prepend(responseText); // prepend the modal to #wrapper dib
        //$('#mailSetupForm')[0].reset();

        // display modal
        $('#modal').reveal({ // The item which will be opened with reveal
            animation: 'fade', // fade, fadeAndPop, none
            animationspeed: 600, // how fast animtions are
            closeonbackgroundclick: false, // if you click background will modal close?
            //dismissmodalclass: 'close' // the class of a button or element that will close an open modal
            dismissmodalclass: 'modal-btn' // the class of a button or element that will close an open modal
        });

    }
    </script>   

</head>
<body>
    <div class="col-sm-6 col-sm-offset-2" style="margin-left: 0%;">
        <div id="main-wrapper" class="subpage">
            <div class="container">
                <div class="row">
                    <div class="12u skel-cell-important">

                        <!-- Content -->

                            <article class="first last">

                                <h1>Test</h1>

                                <p>

                                <form action="" method="POST" id="createForm">
                                <!-- NAME -->
                                <div id="name-group" class="form-group">
                                    <label for="name">First input</label>
                                    <input type="text" class="form-control" name="input1" placeholder="First input" style="width: 400px; max-width: 100%">
                                    <!-- errors will go here -->
                                </div>

                                <!-- EMAIL -->
                                <div id="email-group" class="form-group">
                                    <label for="email">Second input</label>
                                    <input type="text" class="form-control" name="input2" placeholder="Second input" style="width: 400px; max-width: 100%">
                                    <!-- errors will go here -->
                                </div>

                                <!-- SUPERHERO ALIAS -->
                                <div id="superhero-group" class="form-group">
                                    <label for="superheroAlias">Third input</label>
                                    <input type="text" class="form-control" name="input3" placeholder="Third input" style="width: 400px; max-width: 100%">
                                    <!-- errors will go here -->
                                </div>
                                <br>
                                <button type="submit" class="btn btn-success">DO <span class="fa fa-arrow-right"></span></button>
                                </form>

                                </p>

                            </article>                          

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

form_process.php

<?php
$clientLimit = 10;
//$chanNameMin = 4;

if (!$_POST['input1']) 
            { 
            echo <<<HTML
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>Error!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    Input1 not entered
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-red" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>
HTML;

    }elseif (!$_POST['input2']) 
            { 
            echo <<<HTML
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>Error!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    input2 not entered
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-red" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>
HTML;

    }elseif (!$_POST['input3']) 
            { 
            echo <<<HTML
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>Error!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    input3 not entered
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-red" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>
HTML;

    }elseif ($_POST['input3'] > $clientLimit) 
            { 
            echo <<<HTML
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>Error!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    Max input3 is 10
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-red" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>
HTML;
            }else{

?>
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-success modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>IT WORKS!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    The form is submitted. YEY
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-green" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>

<?php
            }
?>

我之前使用过JQuery 1.7.1和jq171 = jQuery.noConflict(true); ,但在我使用bootstrap和JQuery 2.0.3后,我再也不需要noConflict

现在我的问题...... 我已经下载了一个测试管理模板,它使用的是Bootstrap v3.3.6和jQuery v1.11.1。在此之后,脚本不再起作用。页面刷新,它不应该做,并且模式不会显示..

有人可以告诉我出了什么问题吗?我的脑袋现在正在旋转。无法找到解决方案......

更新 我制作了一个新剧本,所以这个案子已经关闭了!

1 个答案:

答案 0 :(得分:0)

这是新脚本。更改了提交方法和方法以显示“cform_Process.php”的响应。现在我得到了我想要的回复:)

$(document).ready(function () {

    var options = {
        url: "intCall/cform_Process.php", // File to submit the form to
        type: "GET", // Submit method. POST or GET
        dateType: "html", // How to return data. JSON, HTML or TEXT
        success: showResponse // Function to call on successful form submittion
    };

    // Bind to form ID using 'ajaxForm' 
    $('#createForm').ajaxForm(options);


});

function showResponse(responseText) {
    console.log('success');
    $('#main-wrapper').find('.CrForm_result').html(response);
}