Question

我有这样的代码：

jQuery("#test_btn").off("click").on("click", function () {
        jQuery.ajax({
                        type: "POST",
                        url: "/api/test/",
                        data: {
                            test: "me"
                        },
                        success: async function (response) {
                            alert("foo");
                        },
                        error: function (e) {
                            console.error(e);

                        }
                    });
        });

为什么成功函数不会打印带有“ foo”的提示？我需要在成功内部使用一个promise函数...但是什么也没有！

Answer 1

我认为您的问题是您使用的是旧的JQuery版本。

在 3.2.1 中，如果您使用异步功能，因为反馈不起作用

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt");
  jQuery.ajax({
    type: "POST",
    url: "/api/test/",
    data: {
      test: "me"
    },
    success: async function(response) {
      alert("Success!");
    },
    error: async function(e) {
      alert('O no, an error! :(');
      console.error(e);

    }
  });
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="banner-message">
  <button>Send XHR request</button>
</div>

在 3.3.1及更高版本中完美运行

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt");
  jQuery.ajax({
    type: "POST",
    url: "/api/test/",
    data: {
      test: "me"
    },
    success: async function(response) {
      alert("Success!");
    },
    error: async function(e) {
      alert('O no, an error! :(');
      console.error(e);

    }
  });
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <button>Send XHR request</button>
</div>

Answer 2

jQuery不支持异步回调，需要使用这样的提取API

await fetch("/api/test/", {
                        method: "post",
                        body:
                            'nonce=' + encodeURIComponent("<?= generate_nonce(); ?>") +
                            "&user_id=" + encodeURIComponent("<?= $_SESSION['user_id']; ?>") +
                            "&supername=" + encodeURIComponent("<?= $_REQUEST['bot_name']; ?>") +
                            "&name=" + encodeURIComponent(valore_base) +
                            "&simple=" + encodeURIComponent("check"),
                        headers:
                            {
                                "Content-Type": "application/x-www-form-urlencoded"
                            }

                    })
                        .then(async function (response) {
//success here 
});

@Kalimah Apps带来的另一种解决方案是在成功回调中声明一个异步函数。基础是 jQuery回调不能异步

jQuery("#test_btn").off("click").on("click", function () {
jQuery.ajax({
                type: "POST",
                url: "/api/test/",
                data: {
                    test: "me"
                },
                success: function (response) {

                    async function abc(response){
                        await my_sync_func(response);
                        alert("done after async")
                    }
                    abc(response);
                },
                error: function (e) {
                    console.error(e);

                }
});

}）;

Answer 3

AJAX（异步Javascript和XML）顾名思义，AJAX请求始终是异步的。

如果要使其同步，只需添加它，

"Games & consoles"

除此之外，

jQuery post（）方法将异步HTTP POST请求发送到服务器将数据提交到服务器并获得响应。

$.ajaxSetup({
  async: false //by default it will be true
});

语法：

$.post('/jquery/submitData',   // url
   { myData: 'This is my data.' }, // data to be submit
   function(data, status, jqXHR) {
     // success callback
    })

有关更多信息，请参阅this API文档。这会很有帮助。

Answer 4

作为JairSnow的方式，我的应用程序使用jQuery 2.2.4。而且我必须具有以下代码才能将jQuery 3.4.1与jQuery 2.2.4并行使用（并且我正在使用ASP.NET MVC）：

在index.cshtml中，我添加了以下代码：

<!-- load jQuery 3.4.1 -->
    <script type="text/javascript" src="~/lib/jquery3.4.1/jquery.js" asp-append-version="true"></script>
    <script type="text/javascript">
        var jQuery_3_4_1 = $.noConflict(true);
    </script>

在javascript中，我添加了以下代码：

jQuery_3_4_1.ajax({
            type: 'GET',
            url: '/Product/GetById',
            data: { id: id },
            dataType: "json",
            success: async function (item) {
                // ... my code...
                let productData;
                productData = await getFactor();
                // ... my code...
            },
            error: function (err) {
                general.notify('Error', 'error');
                console.log(err);
            }
        });
    }

它成功运行。您可以在此处引用使用多个jQuery版本的方法：Can I use multiple versions of jQuery on the same page?

jQuery Ajax异步功能未成功触发

4 个答案: