Ajaxで簡単にローカルファイルを取得してみました!

By | 2016/06/12

今回はajaxを利用して、ローカルファイルを取得する方法をまとめてみました。
ajaxの練習で確認してみたり、これを応用して意図したファイルを取得してくるのに活用できるかと思います。

<script>
    $( function() {
        $( '#ajax-button' ) .click(
            function() {
                $.ajax( {
                    url: 'sample.html',
                    dataType : 'html',
                    success: function( data ) {
                        $( '#sample-text' ).html( data );
                        $( '#sample-result' ).html( '<hr/><font color="blue">読み込みOK(IE,FireFox,SafariはOK)</font><hr/>' );
                    },
                    error: function( data ) {
                        $( '#sample-result' ).html( '<font color="red">読み込みNG(ChromeではNG)</font>' );
                    }
                } );
            }
        );
    } );
</script>

</head>
<body>
    <h1>Ajaxを利用してローカルの外部ファイルを読み込みます。</h1>
    <p>
        <input type="button" id="ajax-button" value="gooo"/>
        <br/>
    </p>
    <div id="sample-result"></div>
    <div id="sample-text"></div>
</body>

今回取得してくるhtml
sample.html

<p>testtest</p>

[demo]
http://htmlcsslaboratory.com/develop/javascript/ajax/index.html

何となくajaxには難しそうな印象を持っている方は少なくはないかもしれませんが、型を理解してしまえば何てことはないです!
また、ajaxについて簡単にまとめた記事を作成しようと考えていますので、時間のあるときに確認していただけたら、幸いです。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です