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"}
