jQuery Ajax

jQueryでAjax(POST/JSON)通信

jQuery

$(function () { $('#submit').click(getResult); function getResult() { var param = { param1: $('#param1').val(), param2: $('#param2').val(), param3: $('#param3').val(), } // POST、JSON形式 $.ajax({ type: 'POST', url: 'xxx', data: param, dataType: 'json' }).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 !'); } }); } });

jQuery(旧)

$(function () { $('#submit').click(getResult); function getResult() { 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をよく書いています。