Ajaxが成功した時にさらにその中でurlを実行したい

Question

Ajaxが成功した時にさらにその中でurlを実行したいです。

$.ajax({
    url: "http://127.0.0.1:8000/test",
    type: 'GET',
    timeout: 100,
    success: function(res, textStatus, xhr) {
        $('.test').click(function(){
            var id =  $(this).attr('id');
            var url = "http://127.0.0.1:8000/data" + id

        })
    }
});

という風にコードを書きました。Ajaxが成功した時、

var url = "http://127.0.0.1:8000/data" + id
```　
のurlをさらに実行したいです。そしてその結果をhtmlに埋め込みたいです。

今のコードだと、urlを定義しただけでそのurlを実行できません。どのようにコードを追記すればurlを実行できますか？

Comments

[m.ts10806]

ちょっと意味が分からないので具体的に説明していただけますか？　>urlを定義しただけでそのurlを実行できません

[kaitotokai]

var url = "http://127.0.0.1:8000/data" + idのurlを

[kaitotokai]

url:"http://127.0.0.1:8000/data" + id, type: 'GET', timeout: 100, success: function(res, textStatus, xhr) {

のようにajax内で実行させたいのですが、今は定義しただけで実行されないという意味です

[m.ts10806]

気になってたんですが、ajaxの中でclickイベントってどうやって発生させるんでしょう・・

Answer 1

successの中でそのURLを叩けばいいです。

$('.test').click(function(){
    $.ajax({
        url: "http://127.0.0.1:8000/test",
        type: 'GET',
        timeout: 100,
        success: function(res, textStatus, xhr) {
            var id =  $(this).attr('id');
            var url = "http://127.0.0.1:8000/data" + id
            $.ajax({
                url: url,
                type: 'GET',
                success: function(res, textStatus, xhr) {
                    // 結果をhtmlに埋め込む
                }
            });
        }
    });
});

【追記】
少し気になったのですが、もしかしたらこうしないとうまく叩けないかもしれないです。

var url = "http://127.0.0.1:8000/data" + id
↓
var url = "http://127.0.0.1:8000/data/" + id

Comments

[tomoyuki123]

mts10806さんがおっしゃってるように、質問されてるコードの書き方だとajaxの中でclickイベントは実行できないと思うので、コードを変更しました。おそらく.testをクリックしたらajaxリクエストをされたいのだと思うので。

[kaitotokai]

ありがとうございます。単に $.ajaxを２回呼び出せばいいのですね！

Answer 2

脱jQuery版

const tests = document.querySelectorAll('.test');

[...tests].forEach(test => {
  test.addEventListener('click', async (e) => {
    const id = e.target.getAttribute('id');
    await fetch('http://127.0.0.1:8000/test');
    await fetch(`http://127.0.0.1:8000/data/${id}`);
  });
});