数据未经过提取

Question

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="../Js/sidebar.js"></script>
<script src="../Js/sweetalert2.all.min.js"></script>

<script>
  async function verifyAccount() {

    var acc = document.getElementById('accountNumber').value;

    // Make an asynchronous request to the controller
    //${acc} not sending data to controller, data is going when i manually give
    const response = await fetch(`/verifyAcc?accountNumber=${acc} `);

    const result = await response.json();

    // Display the result in the resultDiv
    const resultDiv = document.getElementById('resultDiv');

    //also upon true it is not printing Account Number Verified
    resultDiv.innerHTML = `<p>${result.result ? 'Account Number Verified' : 'Account Number Not Found'}</p>`;
  }
</script>

Answer 1

由于您在代码片段中没有使用 jQuery，所以我将其遗漏在我的解决方案中。如果您的 API 存在，那么您的脚本很可能会工作。我稍微修改了它，以便结合公开可用的资源来演示它：

const DOM = Object.fromEntries(['resultDiv','accountNumber'].map(id=>[id,document.getElementById(id)]));

async function verifyAccount() {
  const acc = DOM.accountNumber.value;

  // Make an asynchronous request to the controller
  //${acc} not sending data to controller, data is going when i manually give
  // const url=`/verifyAcc?accountNumber=${acc}`;
  const url=`https://jsonplaceholder.typicode.com/users/${acc}`;
  const response = await fetch(url);
  const result = await response.json();

  // Display the result in the resultDiv
  // console.log(result);
  //also upon true it is not printing Account Number Verified
  DOM.resultDiv.innerHTML = `<p>${result.id ? 'Account Number Verified' : 'Account Number Not Found'}</p>`;
}
DOM.accountNumber.addEventListener("input",verifyAccount);
verifyAccount();

Account number:<br>
<input id="accountNumber" value="7">
<div id="resultDiv"></div>