ajaxの基本実装方法

2018.09

JS_jQuery

Ajaxの基本構文についてメモです。

Ajaxとは

javascriptから非同期でサーバ通信を行い、データを取得できる技術のことです。
ページの遷移を介さず、動的にウェブページの内容を書き換えることができる。
Webページにおいてhtmlの一部のみを書き換える場合、ページ遷移するより効率的であり、無駄なサーバー処理せずに済みます。

HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>ajax</title>
  </head>
  <body>

    <form class="formArea js-formArea" action="" method="post">
      <div id="ajaxArea" class="js-set-html">
        <h1>
          Name is <span class="js-set-name"></span><br>
          Age is <span class="js-set-age"></span>
        </h1>
      </div>
      Name
      <input type="text" name="name" class="inputText js-get-name">
      Age
      <input type="number" name="age" class="inputText inputText--s js-get-age">
      <input type="submit" name="submit" value="submit" class="btn">
    </form>

    <!-- jquery -->
    <script type="text/javascript">
      src="http://code.jQuery.com/jquery-3.2.1.min,js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>

Name is <span class="js-set-name"></span><br>

Age is <span class="js-set-age"></span>

</h1>

</div>

Name

Age

</form>

src="http://code.jQuery.com/jquery-3.2.1.min,js"

integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"

</script>

</body>

</html>

jQuery(ajax)

$(function() {
  $('.js-formArea').on('submit', function(e) {
    e.preventDefault();
    /* Act on the event */
    $.ajax({
      type: 'post',
      url: 'ajax_json.php',    
      dataType: 'json',
      data: {
        name: $('.js-get-name').val(),
        age: $('.js-get-age').val()
      }
    })
    .done(function(data, status) {
      console.log("success");
      console.log(data);
      console.log(status);
      // --- json ---
      var name = data.name;
      var age = data.age;
      $('.js-set-name').text(name);
      $('.js-set-age').text(age);
    })
    .fail(function() {
      console.log("error");
      console.log(status);
    })
    .always(function() {
      console.log("complete");
    });
  });
});

$(function() {

$('.js-formArea').on('submit', function(e) {

e.preventDefault();

/* Act on the event */

$.ajax({

type: 'post',

url: 'ajax_json.php',

dataType: 'json',

data: {

name: $('.js-get-name').val(),

age: $('.js-get-age').val()

}

})

.done(function(data, status) {

console.log("success");

console.log(data);

console.log(status);

// --- json ---

var name = data.name;

var age = data.age;

$('.js-set-name').text(name);

$('.js-set-age').text(age);

})

.fail(function() {

console.log("error");

console.log(status);

})

.always(function() {

console.log("complete");

});

受け渡しする（POSTorGET）データ情報を引数として定義

type: リクエストのタイプを指定(“POST”or”GET”)
url: リクエスト送信するURLを指定
dataType: データの型を指定（json,html,text…等）
data: サーバーへ送信するデータ（例では、対象のクラス名の値を設定）

jqXHRオブジェクト（通信結果処理）

done（成功時に表示）
fail（失敗時に表示）
always（成功時・失敗時に問わず毎回表示）

PHP（送信するデータ）

<?php
if (!empty($_POST)) {
  echo json_encode(array('name'=> $_POST['name'], 'age'=> $_POST['age']));
}

<?php

if (!empty($_POST)) {

echo json_encode(array('name'=> $_POST['name'], 'age'=> $_POST['age']));

}