Top/jQuery/Ajax

XXX YYY

 

HTML( http://bitlabo123.com/test/ajax_test_001.html )

<!DOCTYPE html>
<html lang="ja">
    <head>
        <!--ONEPAGECMS-START-HEAD-->
        <meta charset="utf-8">
        <title>Title</title>
        <!--ONEPAGECMS-END-->
    </head>
    <body>
        <p>
            <input type="button" id="execute" value="送信"><br>
        </p>
        <h1>結果</h1>
        <p>
            <span id="result"></span>
        </p>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="ajax_test_001.js"></script>
    </body>
</html>

ajax_test_001.js

$(function() {
    $('#execute').click(function () {
        $.ajax({
            url: 'ajax_test_001.php',
            type: 'post',
            dataType: 'json',
            data: {
                param1: 'Pram1',
                param2: 'Pram2',
            },
        })
        .done(function (response) {
            $('#result').text(response.P1 + ' : ' + response.P1);
        })
        .fail(function () {
            $('#result').val('失敗');
        });
    });
});

ajax_test_001.php

<?php
header('Content-Type: application/json');

$ret = array('P1' => $_POST['param1'],
             'P2' => $_POST['param2']);
echo json_encode($ret);

Links


Today: 1 / Yesterday: 1 / Total: 68

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   最終更新のRSS
Last-modified: 2019-12-07 (土) 22:48:23