Question

我正在编写外部脚本来检查电子商务商店的可用性。当按下“添加到购物篮”按钮时，我正在调用我的API并检查是否可以订购产品。但是，我不知道如何撤消preventDefault（）。当条件为真时，按钮下的事件应继续，并且应像没有脚本那样将产品添加到购物篮中。

button.addEventListener('click', (event) => {
event.preventDefault();
fetch(`https://example.com/api.php?part=${partId}`)
    .then(function (response) {
        return response.json();
    })
    .then(function (jsonRes) {
        console.log(JSON.stringify(jsonRes));
        if (jsonRes.part.partFound == true) {
            console.log('Found! Processing...');
            // REMOVE preventDefault() and process
        } else {
            console.log('Not found! Aborting...', partId);
        }
    });

}）;

Answer 1

如果您的按钮是type="submit" change it to type =“ button”`。这个

a）不提交表格

b）意味着您不必使用preventDefault来阻止表单提交

这只是意味着您可以决定要如何提交数据，可以通过对API端点的另一个AJAX调用来完成此操作，也可以将整个表单提交给服务器-以您的设置为准

// Grab the form and button, and add an event
// listener to the button
const form = document.querySelector('form');
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);

// Fake API call
function fakeAPI() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`API called!`)
    }, 2000);
  });
}

function handleClick() {
  console.log('Clicked');
  fakeAPI(2000).then(data => {
    // If partfound submit the form data
    // Either another fetch call to post the data,
    // or `form.submit()` to post the whole form instead
  });
}

<form>
  <button type="button">
    Click
  </button>
</form>

Answer 2

您可以尝试以下代码：

async function apiCall(onSuccess, onError) {
    fetch(`https://example.com/api.php?part=${partId}`)
        .then(function (response) {
            return response.json();
        })
        .then(function (jsonRes) {
            console.log(JSON.stringify(jsonRes));
            if (jsonRes.part.partFound == true) {
                console.log('Found! Processing...');
                onSuccess(jsonRes);
            } else {
                console.log('Not found! Aborting...', partId);
                onError();
            }
        });
}

button.addEventListener('click', (event) => {
    // show loading or something
    apiCall(function (response) {
        // success
    }, function () {
        // error
    });
});

调用API后撤消preventDefault（）

2 个答案: