如何在httpRequest (ajax )和一些验证之后加载页面并填充一些字段？单击signin重定向并填充字段后

Question

我们需要帮助，因为我对此还比较陌生。

在单击按钮后，我在第二页填充字段时遇到困难。

例如，：

• one单击登录，

• 信息被验证，

• 如果成功加载一个新页面，则填充一些字段。

• 从数据库

检索数据

• 一旦验证了信息，页面重定向到另一个页面，然后在新加载的页面上填充信息

。

，但是，这对我不起作用。我确实了解到，加载新页面后的后续脚本不会运行。

function makeRequest() {
  httpRequest = new XMLHttpRequest();

  if (!httpRequest) {
    alert("Giving up :( Cannot create an XMLHTTP instance");
    return false;
  }

  httpRequest.onreadystatechange = displayContents;
  httpRequest.open("GET", queryUrl2, true);
  httpRequest.send();
}

function displayContents() {
  // let email = $("#uname").val().trim();
  // let password = $("#pword").val().trim();
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      console.log("Perfect!");
      console.log(httpRequest.responseText);
      let jsonResponse = JSON.parse(httpRequest.responseText);
      let verifyEmail = jsonResponse["email"];
      let verifyPhone = jsonResponse["phoneNumber"];

      if (email === verifyEmail && password === JSON.stringify(verifyPhone)) {
        hold.push(JSON.stringify(jsonResponse["phoneNumber"]));
        console.log(hold[0]);
        console.log("pushed");
        window.location.replace("../index.html");
      } else {
        alert(
          `Invalid Username and/or Password. Please confirm and try again.`
        );
        window.location.href = "/";
        console.log(`error: there was a problem`);
      }
    }
  }
}

makeRequest();

window.onload = function windowLoad(event) {
  event.preventDefault();
  $(window).ready(() => {
    setTimeout(() => {
      setValue(hold[0]);
      console.log(`This is the lost hold variable: ${hold}`);
    }, 1000);
  });
};

let setValue = (x) => {
  x = x;
  console.log(x);
  $("#sphone-1").text(x);
  $("#phone-1").val(x);
  $("#phone-2").focus();
};

Answer 1

您可以在本地存储数据。

登录页：

hold.push(JSON.stringify(jsonResponse["phoneNumber"]))
storeLocal(hold)

function storeLocal(data){
    localStorage.setItem('userData', data);
}

index.html页面：

window.onload = () => {
    let userData = getLocal()
    console.log(`This is the found hold variable: ${userData}`);
    setValue(userData[0]);
}
function getLocal(){
    localStorage.getItem('userData');
}

查看代码中的数据流，您似乎正在从服务器检索用户凭据，并检查它们在客户端上是否有效。这个不是很好的实践，因为应该在后端处理身份验证和用户凭据。客户端应该安全地将其用户名和密码发送到服务器，而服务器应该返回和加密令牌，用户将在本地存储这些令牌，并在将来使用这些令牌从服务器检索用户数据。

签到

async function submit(username, password){
    const params = {
        method: 'POST',
        headers: {'Content-Type': 'application/json; charset=utf-8'},
        body: JSON.stringify({ username, password })
    }
    const response = await fetch('api/user', params)
    if (response.ok) {
        const jwt = await response.json()
        localStorage.setItem('token', jwt);
        window.location.replace("../index.html");
    } else {
         // invalid credentials 
    }
}

index.html

window.onload = async () => {
    let userData = await getData()
    setValue(userData[0]);
}
async function getData(){
    const token = localStorage.getItem('token');
    const params = {
        method: 'GET',
        headers: {'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json; charset=utf-8'},
    }
    const response = await fetch('api/user', params)
    if (response.ok) {
        const userData = await response.json()
        return userData
    } else if (response.status === 401) { 
        // unauthorized
        clearSession()
    }
    function clearSession () { localStorage.removeItem('token') }
}