【jQuery】AJAX,success時のreturnurlについて

success時のreturnurlについて

by tea4two

HTML

<script src="http://fonts.googlepis.com/css?famaily=Open+Sans:400,700"></script>
<!-- Modified fiddle : http://jsfiddle.net/clickthelink/Uwcuz/1/ -->

<form method="post" action="/echo/html/" ajax="true"> 
    <h2>Form Page</h2>
    <span>        
        <label>Message: </label>
        <input type="text" name="html" placeholder="Howdy..." />
    </span>
 <span>
        <label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/>   </label>
        <input type="submit" value="Submit" />      
    </span>

</form>
<div id="result-page" style="display:none"><h2>Result Page:</h2></div>
<div id="link-page" style="display: none;">
    <h2>Link page:</h2>
    <p>this is a link <a href="#">Link</a>
    </p>
</div>

CSS

body {
    font-family:'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 13px;
}
form{
    padding: 25px 10px;
    background: #6DCBED;
    font-size: 14px;
}
form span {
    display: block;
    margin: 10px;
}
label {
    display: inline-block;
    width: 100px;
}
input[type="text"] {
    border: 1px soild #ccc;
    width: 200px;
    padding: 5px;
}
input[type="submit"] {
    padding: 5px 15px;
    border: 0;
}
span#result {

}
img#loadingimg {
    display: none;
}

#result-page{
    padding: 25px 10px;
    background: #ff9;
    font-size: 14px;
}
#link-page{
    padding: 25px 10px;
    background: #9EE04E;
    font-size: 14px;
}

JavaScript

$(document).ready(function (e) {

    $("form[ajax=true]").submit(function (e) {

        e.preventDefault();

        var form_data = $(this).serialize();
        var form_url = $(this).attr("action");
        var form_method = $(this).attr("method").toUpperCase();

        $("#loadingimg").show();

        $.ajax({
            url: form_url,
            type: form_method,
            data: form_data,
            cache: false,
            success: function (returnhtml) {
                $("#result-page").append(returnhtml).show();
                $('form').hide();
                $("#loadingimg").hide();
                setTimeout(function () {
                    $("#result-page").hide();
                    $("#link-page").show();
                }, 5000);
            }
        });

    });

});