Question

我创建了一个save(id)函数，它将提交ajax post请求。致电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

您有两种选择，可以同步运行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)
    }
  });

}

jQuery Ajax通过函数获取值？

2 个答案: