jQuery Ajaxは関数を介して値を取得しますか？

Question

私はsave(id)関数を作成して、ajax投稿要求を送信します。 save(id)を呼び出すとき。次のステップに進む前にsave(id)から価値/データを取得する方法。これを解決するには？例えば

：

 function save(id) { 
      $.ajax({ 
       type: "POST", 
       url: "/post/", 
       dataType: "json", 
       contentType: 'application/json', 
       data: JSON.stringify({ 
        id: id, 
       }), 
       success: function (data) { 
       return data; 
       }, 
       error: function (error) { 
       return data; 
       } 
      }); 
     } 

使用法：

$('.btn-create').click(function() { 
    var id = 123; 
    data = saveArea(id); //get data from ajax request or error data? 
    if (data) { 
    window.location = "/post/" + data.something 
    } 
} 

Answer 1

あなたは2つのオプションがあり、いずれかの同期（推奨されません）AJAXコールを実行します。それが終了されるまでまたは非同期

@Drew_Kennedyが言及したよう

同期コールバックを使用して、これはユーザーエクスペリエンスを低下させる、ページを凍結します。

function save(id) { 
    return $.ajax({ 
     type: "POST", 
     url: "/post/", 
     dataType: "json", 
     contentType: 'application/json', 
     async: false, 
     data: JSON.stringify({ 
      id: id, 
     }) 
    }).responseText; 
} 

$('.btn-create').click(function() { 
    var id = 123; 
    // now this will work 
    data = save(id); 
    if (data) { 
    window.location = "/post/" + data.something 
    } 
} 

非同期（推奨）

これは、バックグラウンドで実行され、ページ上で、通常のユーザーとの対話が可能になります。

function save(id, cb, err) { 
    $.ajax({ 
     type: "POST", 
     url: "/post/", 
     dataType: "json", 
     contentType: 'application/json', 
     data: JSON.stringify({ 
      id: id, 
     }), 
     success: function (data) { 
      cb(data); 
     }, 
     error: err // you can do the same for success/cb: "success: cb" 
    }); 
} 

$('.btn-create').click(function() { 
    var id = 123; 
    save(id, 
    // what to do on success 
    function(data) { 
     // data is available here in the callback 
     if (data) { 
      window.location = "/post/" + data.something 
     } 
    }, 
    // what to do on failure 
    function(data) { 
     alert(data); 
    } 
    }); 
} 

Answer 2

ちょっと簡単にしてください。

まず、成功コールバックにwindow.location = "/post/" + data.somethingを追加してください。

function save(id) { 
    return $.ajax({ 
     type: "POST", 
     url: "/post/", 
     dataType: "json", 
     contentType: 'application/json', 
     data: JSON.stringify({ 
      id: id, 
     }), 
     success:function(data){ 
      window.location = "/post/" + data.something 
     } 
    }).responseText; 
} 

またはクリックイベント内のすべてのあなたのAjaxコードを追加することにより、このよう 。

$('.btn-create').click(function() { 
    var id = "123"; 

    $.ajax({ 
    type: "POST", 
    url: "/post/", 
    dataType: "json", 
    contentType: 'application/json', 
    data: JSON.stringify({ 
     id: id, 
    }), 
    success: function (data) { 
    window.location = "/post/" + data.something 
    }, 
    error: function (error) { 
     console.log(error) 
    } 
    }); 

}