jQuery 「Ajax」JavaScriptファイルをサーバから取得する

$.getScript()メソッドは、WebサーバからJavaScriptファイルを読み込みます。第1引数「URL」として、リクエストの送信先のURLを指定します。第2引数「コールバック」には、リクエストの成功時に実行されるコールバック関数を指定します。コールバック関数の引数は、

データ・・・レスポンスデータ
テキストステータス・・・通信の結果を表す文字列

となります。なお、第2引数は省略することも可能です。

書式

jQuery.getScript(URL,[コールバック])
$.getScript(URL,[コールバック])

$.getScript('test.js', function(){
   alert('Script loaded.');
});

サンプル

サーバからJavaScriptファイルを読み込み実行する

<!DOCTYPE  html>
<html>
      <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <style>
          
        </style>
  </head>
  <body>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <form>
          <br>
          姓<br><input class="form-input" type="text" name="lastname"><br> 
          名<br><input class="form-input" type="text" name="firstname"><br> 
          メールアドレス<br><input class="form-input" type="text" name="email"><br>
          電話番号<br>
          <input class="form-input" type="text" name="phone"><br>
          職業 <br>
          <select multiple class="form-input" name="job">
            <option value="">-------</option>
            <option value="employee">会社員</option>
            <option value="self-employed">自営業</option>
            <option value="student">学生</option>
            <option value="homemaker">主婦・主夫</option>
          </select><br>
          <button class="button" type="submit" name="submit">送信</button>
        </form>
        <div class="desc"></div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxxx all rights reserved.</p>
      </div>
    </div>
    <script>
    $(document).ready(function(){
      $('.button').on('click', function() {
        $.getScript(
          'sample11-4.js',
          function(data, textStatus){
            getScriptSuccess($('input[name=lastname]').val());
          }
        );
      });
    });
    </script>
    </body>
</html>

sample11-4.js

function getScriptSuccess(name){
alert(name);
}

カテゴリー:AjaxJavaScriptjQuery