jQueryによるAjax操作の基本

• きっかけとなるボタン
• 結果を表示するDIVタグ を用意します。

● jQuery の ajax（GETメソッド）で動的にjson読み込みをした後にタグにjsonの内容をテキストに変換して表示する

<button type="button" class="btn btn-primary btn-sm" onclick="get_stripe_invoice_json('{{ $v->id }}' , this );">Invoice Json</button>
<textarea class="json_detail" id="ajax_123456789"></textarea>                    

function get_stripe_invoice_json( id, btn_obj ){
    $.ajax({
        url: 'ajax取得するURL' ,
        type:'GET',
        data:{
            'id':123456789,
        }
    })
    // on Success
    .done( (data,status) => {
        json_string = JSON.stringify(data,null, 4);
        $('#ajax_' + id).html( json_string ).fadeIn();
    })
    // on Error
    .fail( (data) => {
        alert('Ajax Error');
    })
}

● 要素の内容を書き換える（ .html() ）

$("#hoge").html('<p>書き換える要素</p>');

● 要素に追加する（ .append() ）

$("#hoge").append('今ある要素のいちばん後ろに追加します');

● 要素を動的に( test.phpを読み込んで) に追加する（ .load() ）

$("#hoge").load("test.php,null,function(){
	alert('読み込み完了');
});

● 要素を削除する（ .remove() ）

$("#hoge").remove();

● （class="hoge"な要素の）CSSプロパティを書き換える

$('.hoge').css({
	'width'  : '100px' , 
	'height' : '200px'
});

● 親要素、子要素を選択するセレクタの記述

#contents の中にある .title 要素を取得する場合

$(.title', '#contents');           // ☓ 遅い
$('#contents').find('.title'); // ○ 高速

$(this).parent().find('.myclass');　// 全ての子要素の中から 「myclass」クラスを取得。
$(this).children('.myclass');　// 直下の子要素の中から 「myclass」クラスを取得。孫要素は取得できない

● 要素の属性を取得する。属性を変更する

var img_src = $("img").attr("src");  // 取得
$("img").attr("src", "b.jpg");  // 変更

● セレクタが正しく動作して、jQueryオブジェクトが取得できているかどうかを調べる

var jq_obj = $('MY_ID');
if ( $(jq_obj).length > 0 ){
	alert('jQueryオブジェクトが正しく取得できています。');
}

$(function(){

$('.my_ajax_btn').on('click',function(){
    $.ajax({
        url:'./request.php',
        type:'GET',				// GET または post
        data:{
            'id':$('#userid').val(),
        }
    })
    // on Success
    .done( (data) => {
        $('.result').html(data);
        console.log(data);
    })
    // on Failed
    .fail( (data) => {
        $('.result').html(data);
        console.log(data);
    })
    // on Always
    .always( (data) => {
    });
});

});