jQueryでAjax通信を行う方法

jQueryでAjax通信を行う方法をサンプルコードで解説
ユーザ情報を取得・更新することをサンプルとして作成

Get通信により情報を取得する
Post通信により情報を更新する

Ajaxとは
Get通信
Post通信
初心者向けおすすめ書籍をご紹介！
まとめ

Ajaxとは

Ajaxとは「非同期通信」です

通常の画面操作ではサーバー側にアクセスする場合
画面リフレッシュが必要です(同期処理といいます)

しかし、Ajaxを使用することで
画面をリフレッシュ(再読み込み)する必要がなく
画面の一部を最新の情報にすることが可能

例えば検索条件を入力＞検索ボタンをクリック
検索結果が非同期(画面の再読み込み無し)で表示されるようなイメージ

同期処理：画面のリフレッシュが伴う
非同期処理：画面のリフレッシュが不要

非同期通信により画面の再読み込み
クルクルがないというイメージです

Get通信

ユーザ情報を取得

パラメーターとしてユーザNoを送る
※サーバーサイドの言語はPHP・Java共に使用可能

/**
* ユーザNoからユーザ情報を取得する
*/
function initUserInfo(userNo) {

	$(function(){
        $.get({
            
            //TODO URLの指定
            url: 'base/info/EditService.php', 
            //URLへパラメーターを渡す
            data:{
                'userNo': userNo
            },
            dataType: 'json',
        }).done(function(data) {
			if(data !== null) {
				//TODO 取得結果が存在したら
			} else {
				//TODO 取得結果が存在しなかったら
			}
        }).fail(function(XMLHttpRequest, textStatus, errorThrown){
			//取得エラー
            alert(errorThrown);
        })
	})
}

/**

* ユーザNoからユーザ情報を取得する

function initUserInfo(userNo) {

$(function(){

$.get({

//TODO URLの指定

url: 'base/info/EditService.php',

//URLへパラメーターを渡す

data:{

'userNo': userNo

dataType: 'json',

}).done(function(data) {

if(data !== null) {

//TODO 取得結果が存在したら

} else {

//TODO 取得結果が存在しなかったら

}

}).fail(function(XMLHttpRequest, textStatus, errorThrown){

//取得エラー

alert(errorThrown);

})

}

Post通信

ユーザ情報を更新

パラメーターはユーザクラス化

/**
* ユーザクラス
*/
function User() {
	var self = this;

	//プロパティ
	this.userNo = "";
	this.userName = "";
	this.userKana = "";
	this.gender = "";
	this.birthday = "";
	this.memo = "";

	//メソッド定義
	User.prototype.getUserDataScreenValue = User_getUserDataScreenValue;

	//画面の項目から値を取得します。
	function User_getUserDataScreenValue() {
		self.userNo = $('#userNo').val();
		self.userName = $('#userName').val();
		self.userKana = $('#userNameKana').val();
		self.birthday = $('#dtpBirthday').val();
		self.gender = $('input:radio[name="gender"]:checked').val();
		self.memo = $('#etc').val();
		return self;
	}
}

/**
* ユーザ情報を更新します。
*/
function updateUser() {

	//ユーザクラスを宣言します。
	var user = new User();
	
	//画面の項目から値を取得、ユーザクラスへまとめます。
	var userData = user.getUserDataScreenValue();

	$(function(){
        $.post({
            //TODO URLの指定
            url: 'base/info/EditService.php',
            //TODO パラメータの指定
            data:{
                 'userNo': userData.userNo
                ,'userName': userData.userName
                ,'userKana': userData.userKana
                ,'gender': userData.gender
                ,'birthday': userData.birthday
                ,'memo': userData.memo
            },
            dataType: 'json',
		 }).done(function(data, textStatus, jqXHR) {
			// TODO 更新成功
			$("#message").text("更新しました。")
			$("#dlgMessage").dialog("open");

        }).fail(function(XMLHttpRequest, textStatus, errorThrown){
			//更新失敗
        })
	})
}

/**

* ユーザクラス

function User() {

var self = this;

//プロパティ

this.userNo = "";

this.userName = "";

this.userKana = "";

this.gender = "";

this.birthday = "";

this.memo = "";

//メソッド定義

User.prototype.getUserDataScreenValue = User_getUserDataScreenValue;

//画面の項目から値を取得します。

function User_getUserDataScreenValue() {

self.userNo = $('#userNo').val();

self.userName = $('#userName').val();

self.userKana = $('#userNameKana').val();

self.birthday = $('#dtpBirthday').val();

self.gender = $('input:radio[name="gender"]:checked').val();

self.memo = $('#etc').val();

return self;

}

/**

* ユーザ情報を更新します。

function updateUser() {

//ユーザクラスを宣言します。

var user = new User();

//画面の項目から値を取得、ユーザクラスへまとめます。

var userData = user.getUserDataScreenValue();

$(function(){

$.post({

//TODO URLの指定

url: 'base/info/EditService.php',

//TODO パラメータの指定

data:{

'userNo': userData.userNo

,'userName': userData.userName

,'userKana': userData.userKana

,'gender': userData.gender

,'birthday': userData.birthday

,'memo': userData.memo

dataType: 'json',

}).done(function(data, textStatus, jqXHR) {

// TODO 更新成功

$("#message").text("更新しました。")

$("#dlgMessage").dialog("open");

}).fail(function(XMLHttpRequest, textStatus, errorThrown){

//更新失敗

})

}

初心者向けおすすめ書籍をご紹介！

jQueryの基本的なところから学びたい人向け

リンク

プログラミングを学んだけど、実際Webシステムで
どうやって開発するの？という方向けの書籍です

リンク

Kindle Unlimitedなら無料で読めます
初回登録、30日間無料！

Kindle Unlimitedを30日間無料体験する

まとめ

ユーザ情報の取得・更新サンプルコードを備忘録的に記載
ご参考になりましたら幸いです