JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

AJAX呼び出しでJavaScriptの変数を渡す方法とは？基本と実装例を解説

AJAX（Asynchronous JavaScript and XML）呼び出しでJavaScriptの変数を正しく渡すには、コードの書き方を少し工夫する必要があります。まず、従来の書き方を見てみましょう。

従来の書き方

var page = parseInt(getUrlParameter('page'));

このコードを、以下のように書き換えます。

改善された書き方

var page = +getUrlParameter("page") || 100;

この書き方のポイントは、単項プラス演算子（+）を使って文字列を数値に変換している点です。さらに、|| 演算子を組み合わせることで、パラメータが取得できなかった場合や数値に変換できなかった場合に、デフォルト値として 100 が自動的に設定されます。これにより、parseInt を使うよりも簡潔で安全なコードになります。

実装例

以下のコードを実行して、AJAX呼び出しで変数を正しく渡す動作を確認してみましょう。

<html>
   <script>
      function getUrlParameter ( param ) {
         return param === "page" ? 500 : false;
      }
      var page = +getUrlParameter("Demo") || 100;
      alert(page);
      page = +getUrlParameter("page") || 100;
      alert(page);
   </script>
   <body>
   </body>
</html>

このサンプルでは、パラメータ名が "page" の場合には 500 が返され、それ以外の場合には false が返されます。その結果、最初のアラートではデフォルト値の 100 が、2番目のアラートでは 500 が表示されます。このように、単項プラス演算子と || 演算子を組み合わせることで、変数の初期化を一行で安全に行うことができます。

  1. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  2. JavaScriptでブロックスコープ変数を宣言するには？letとconstの使い方を解説

    ブロックスコープ変数とはJavaScriptでブロックスコープ変数を宣言するには、ES2015（ES6）で導入された let および const キーワードを使用します。これらのキーワードで宣言された変数は、{ }（波括弧）で囲まれたブロックの中でのみ有効となり、ブロックの外からアクセスしようとするとエラーが発生します。let と const の違いlet は値の再代入が可能な変数を宣言するキーワードで、const は再代入ができない定数を宣言するキーワードです。どちらもブロックスコープを持つため、従来の var（関数スコープ）と異なり、意図しない変数の上書きや漏れを防ぐことができます。特別な