[jQuery]Ajaxのサンプル

サンプルは下記ページの内容をほとんどそのまま書かせてもらった。

サンプルコード

htmlとjQueryの記述。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JS Practice</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

    <form id="form_1" method="post">
        <p>名前<input type="text" name="userid" id ="userid"></p>
        <p>パスワード<input type="text" name="passward" id="passward"></p>
    </form>

    <button id="ajax">送信</button>
    <div class="result"></div>

    <script>
        $(function() {
            $('#ajax').on('click', function() {
                // Ajax通信を開始
                $.ajax({
                    url: './request.php',
                    type: 'POST',
                    data: {
                        'userid':$('#userid').val(),
                        'passward':$('#passward').val()
                    },
                    dataType: 'html',// POST先から受信するデータタイプ
                })  
                // Ajaxが成功した時
                .done((data) => {
                    $('.result').html(data);
                    console.log(data);
                })  
                // Ajaxが失敗した時
                .fail((data) => {
                    $('.result').html(data);
                    console.log(data);
                })  
                // Ajaxが成功した時と失敗した時
                .always((data) => {
                }); 
            }); 
        }); 
    </script>

</body>
</html>

PHPの記述

<?php

header('Content-type: text/plain; charset=UTF-8');
if (isset($_POST['userid']) && isset($_POST['passward'])) {
    $id = $_POST['userid'];
    $pass = $_POST['passward'];
    $str = "SUCCESS\nuserid:".$id."\npassward:".$pass."\n";
    $result = nl2br($str);
    echo $result;// フロントに値を返す
} else {
    echo "FAIL";
}

その他参考

先述のリンク先でも紹介されていたページ。

jQuery.ajax()のまとめ

ajax処理で取得したデータの内容についても言及されていて勉強になったページ。

JavaScriptがちょっとわかる人向けの、Ajaxの話。

コメントを残す

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

14 − 8 =

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください