时间戳

首页 > 解决方案 > 通过按钮调用 Ajax 函数而不是自动加载

javascript - 通过按钮调用 Ajax 函数而不是自动加载

问题描述

我在网上得到了这段代码，它似乎做了我想要实现的目标。但是，该函数调用 onload。我希望它仅在我单击按钮时才起作用。像这样简单的东西：

<button type="submit" form="form" value="Submit">Submit</button>

这是JS：

$.ajax("https://api.base62.io/encode", {
    type: "POST",
    data: JSON.stringify({ data: "Hello world!" }),
    contentType: "application/json",
}).done(function (data) {
    $("#encoded").html(data.encoded);
}).fail(function (xhr, status, error) {
    $("#error").html("Could not reach the API: " + error);
});

HTML：

<p id="encoded">Encoding..</p>
<p id="error"></p>

JSFiddle 演示

标签： javascriptjqueryajax

解决方案

将处理程序添加到您的代码中。在此处了解有关 ajax的更多信息

$('#ajax-btn').click(function() {
$.ajax("https://api.base62.io/encode", {
  type: "POST",
  data: JSON.stringify({
    data: "Hello world!"
  }),
  contentType: "application/json",
}).done(function(data) {
  $("#encoded").html(data.encoded);
}).fail(function(xhr, status, error) {
  $("#error").html("Could not reach the API: " + error);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="encoded">Encoding..</p>
<p id="error"></p>

<button id="ajax-btn"> CLick Me </button>

推荐阅读