ajaxで取得したデータを変数に格納する

下記のソースはajaxで取得したテキストをresultの中に出力するよう書かれているものです。
ボタンを押すとasynchronous.htmlの内容を表示します。

<!DOCTYPE html> <html lang="ja"> <head> </head> <body> <button>asynchronous</button> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ var box; $('button').click(function(){ $('#result').load('asynchronous.html'); }); }); </script> </body> </html>

このソースを<div id="result"></div>内に表示するのではなく変数boxの中にテキストデータとして書き出すように書き換えたいのですがうまくいきません。わかる方いらっしゃいましたらお返事おねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

$.ajaxを使ってajaxが成功した時にboxに結果を代入すれば良いかと思います。
jQuery.ajax() | jQuery API Documentation

テキトーに作ったサンプルを載せておきます。動作保証はしていませんので参考までに

javascript
1$(function(){
2  var box;
3  $('button').on('click', function(evt) {
4    var url = 'asynchronous.html';
5    $.ajax({
6      url: url,
7      type: 'get',
8      dataType: 'html'
9    })
10    .done(function(res) {
11      console.log('DONE', res);
12      box = res;
13    })
14    .fail(function(jqXHR, statusText, errorThrown) {
15      console.log('FAIL', jqXHR, statusText, errorThrown);
16    });
17  });
18});