jQueryによるAjax操作の基本
<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');
})
}
$("#hoge").html('<p>書き換える要素</p>');
$("#hoge").append('今ある要素のいちばん後ろに追加します');
$("#hoge").load("test.php,null,function(){
alert('読み込み完了');
});
$("#hoge").remove();
$('.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"); // 変更
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) => {
});
});
});