Home > JavaScript

JavaScript Archive

JQueryでAjaxしてみる

HTMLを書く

まずHTMLを用意します。JQueryを読み込みます。Ajax通信を書くJavaScriptは別ファイルにしています。
さらに、受け取ったサーバーから受け取ったJSON形式をパースするためにjson2を使用します。
json2はこちらからダウンロード。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="insert.js"></script>
<title>AjaxTest</title>
</head>
<body>

<input type="text" name="todo" id="todo" size="30" value="" />
<input name="insert-btn" type="button" value="追加" onclick="javascript:insertAjax();" />
<div id="error-message" style="color: red;"></div>
<div id="response-message" style="color: blue;"></div>

</body>
</html>

JQueryでAjax通信を書く

今回はサーバーから受け取るデータをJSON形式にしています。JavaScriptではJSON形式にしておいたほうが処理がしやすいです。

POSTで送るパラメータはdata:に記述していきます。
また正常時と異常時の場合に起動する関数をsuccess:, error:に書いていきます。
今回は関数オブジェクトとして別に定義していますが、ここにそのまま書く事もできます。

insert.js

function insertAjax() {
    $.ajax({
        type: "POST",
        url: "./insert.php",
        dataType: 'json',
        data: "todo=" + $('#todo').val(),
        success: handleSuccess,
        error: handleError
    });
}

var handleSuccess = function(data, dataType) {
    // HTMLを追加する
    // JSON形式のdataは、配列ならdata[0]、オブジェクトならdata.todoなどとして扱える
    $("#response-message").append(data + "がDBに挿入されました。");
}

var handleError = function(XMLHttpRequest, textStatus, errorThrown) {
    // HTMLを追加する
    $("#error-message").append(JSON.parse(XMLHttpRequest.responseText));
}

サーバー側（PHP）の処理を書く

ポイントはサーバー側で出力したものが、そのまま$.ajaxのsuccess:で指定する関数オブジェクトの第一引数（ここではdata）に入ってくるということです。
出力する文字列は必ずjson_encode関数でJSONエンコードしてから出力すること。

ちなみに今回は入力チェックでNGだった場合に、header関数で403を返しています。
なぜそのようなことをするかというと403で返すことにより、$.ajaxでerror:が呼ばれて、エラー処理ができるからです。
ただこのようなやり方が正しいやり方なのかはわかりません。入力チェックで403を返すのも変な感じがしますし。

insert.php

<?php
// 送られてきたデータを取得
$todo = isset($_POST['todo']) ? $_POST['todo'] : NULL;

// 入力チェック
if (is_null($todo) || $todo === "") {
    // JQueryのAjaxでerrorとさせるため403を返却する。
    header('HTTP/1.0 403 Forbidden');
    $result = "NG";
    echo(json_encode($result));
} else {
    // DBにデータを挿入する。
    // ～省略～
    $result = $todo;
    echo(json_encode($result));
}
?>

実行結果

JQueryでAjaxしてみるの実行結果

参考

JQueryで要素の存在チェック

要素が存在しているかのチェックはlengthメソッドを使用して行います。

function checkExist() {
    if ($('#contents').length) {
      alert('存在します。');
    }
}

aタグで#を設定した際URLに#を付けなくする方法

aタグにonclickとか設定して、リンクさせたくない場合、<a href=”#”>とかしますが、それだとそこをクリックした際に、URLの末尾に「#」がついて気持ち悪いので、それをさせない方法です。

以下のように記述します。

<a onclick="function_name(); return false;" href="javascript:void(0);">test</a>

javascript:void(0);でリンクを無効にし、return falseでクロスブラウザで挙動を合わせる場合に、onclickしても、見せ掛け上処理が無効となるようにしている。

参考

ホーム > JavaScript

Pages
Recent Entries
Categories
Archives
Tag Cloud
Search
Feeds
Meta

Return to page top