jQuery Ajax

jQueryでAjax(POST/JSON)通信

jQuery

$(function () { $('#submit').click(function() { var param = { param1: $('#param1').val(), param2: $('#param2').val(), param3: $('#param3').val(), } $.ajax({ // POST type: 'POST', url: 'xxx', data: param, // JSON形式 dataType: 'json', // 同期設定 true 非同期、false 同期 async: false, // キャッシュ true 有効、false 無効 cache: false, // タイムアウト timeout: 10000 }).done(function() { // 実行中 $('#result').html('done'); }).fail(function() { // 失敗 $('#result').html('fail'); }).always(function(result) { // 完了 $('#result').html('always'); if (result.state == 'success') { // 成功レスポンス $('#result').append(result.response); } else { // 失敗レスポンス $('#result').append('Fatal error !'); } }); // POST、GETの非同期通信 // POST // $.post('xxx', param, function(){}, 'json'); // GET // $.get('xxx', param, function(){}, 'json'); }); });

jQuery(旧)

$(function () { $('#submit').click(function() { var param = { param1: $('#param1').val(), param2: $('#param2').val(), param3: $('#param3').val(), } // POST、JSON形式 $.ajax({ type: 'POST', url: 'xxx', data: param, dataType: 'json', // 成功Ajax success: function(result, dataType) { if (result.state == 'success') { // 成功レスポンス $('#result').html(result.response); } else { // 失敗レスポンス $('#result').html('Fatal error !'); } }, // 失敗Ajax error: function(XMLHttpRequest, textStatus, errorThrown) { this; alert('Error : ' + errorThrown); } }); }); });

HTML

<form> <input id="param1" type="text"> <input id="param2" type="text"> <input id="param3" type="text"> <input type="button" id="submit"> </form> <div id="result"></div>

json_encodeを使って、JSON形式に変換。

PHP

// パラメタを受け取って処理 try { $state = 'success'; $response = '(成功レスポンス)'; } catch (Exception $e) { $state = 'failure'; $response = '(失敗レスポンス)'; } $result['state'] = $state; $result['response'] = $response; // JSON形式にして返す header('Content-Type: application/json'); echo json_encode($result); exit;

JSON

{"state":"success","response":"xxx"}

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について