Last-Modified: 2022/06/15

jQueryでAjax通信を実装する方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでAjax通信を実装する方法について、簡単に解説していきます。

Ajaxとは

AjaxとはAsynchronous JavaScript + XMLの略です。

JavaScriptの機能を利用して非同期通信を行うことです。

ページ遷移することなく、情報を更新することができる点が大きな特徴です。

基本の書き方

jQueryでのAjax通信の例を以下に示します。

$(function() {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    type: 'GET',
    dataType: 'json',
  }).done(function(data) {
    var stringifiedData = JSON.stringify(data);
    var parsedData = JSON.parse(stringifiedData);
    console.log(parsedData);
  }).fail(function(data) {
    alert('error');
  });
});

まず、$.ajax内にURLとメソッド、データタイプを書きます。

.done内には成功した場合の処理を、.fail内には失敗した場合の処理を書きます。

リクエストデータをPOSTする場合

リクエストデータをPOSTする場合も基本的な書き方は同じです。

ただし、contentTypeの指定と送信するdataが追加で必要となります。

$(function() {
  var data = {
    title: 'ほげタイトル',
    body: 'ほげ本文',
    userId: 1,
  };
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    type: 'POST',
    dataType: 'json',
    data:JSON.stringify(data),
    contentType: 'application/json'
  }).done(function(data) {
    var stringifiedData = JSON.stringify(data);
    var parsedData = JSON.parse(stringifiedData);
    console.log(parsedData);
  }).fail(function(data) {
    alert('error');
  });
});

上記の例では、リクエストデータとしてdataを用意して、JSON文字列で送信しています。

• facebook
• Tweet
• Read Later