重定向表单URL JAVASCRIPT

Question

我在一个购物车项目中，在表单部分，我必须通过后端验证一个表单，它发送给我一个响应，该响应生成一个订单号，然后我必须在本地的另一个html页面中显示该响应，

它工作得很好，但是当我按下“发送”按钮时，重定向没有完成，只是我想在单击该按钮时执行此重定向，

我想指定我使用的方法异步和等待在一个承诺(我还不熟悉这些方法)，所以我想知道是否有可能进行重定向时，或表单被发送到后端，或只是减少承诺的时间？

我尝试使用一个if检查，如果响应具有201状态，那么它将重定向到带有订单Id的确认页面：

​

requetePostVersLapi.then(async(res)=>
{
          
            let numeroDeCommande = await res.json()
        // If the request is accepted and the form send then redirect to confirmation.html
            if(res.status == 201)
            {
                  window.location.href=`confirmation.html?orderId=${numeroDeCommande.orderId}`
            // window.location.href=`confirmation.html?orderId=${numeroDeCommande.orderId}`=*
      }
// Quand le formulaire est envoyé...
myForm.addEventListener('submit',(e)=>
{

 
      const firstNameInput = document.getElementById('firstName')
      const lastNameInput = document.getElementById('lastName')
      const addressInput = document.getElementById('address')
 
      const cityInput = document.getElementById('city')
      const emailInput = document.getElementById('email')
      
      
   
      let RegexName =  new RegExp(/^[a-zA-z-\s]+$/)
      let RegexCity =  new RegExp(/^[a-zA-z-\s]+$/)
      let RegexAdress = new RegExp(/^[a-zA-z-\s]+$/)
      let RegexEmail = new RegExp(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)

      
        
              

      const checkFirstName = function ()
      {
          const firstNameErrorMsg = document.getElementById('firstNameErrorMsg')

            if(RegexName.test(firstNameInput.value) === false)
            {
                  firstNameErrorMsg.innerHTML = "Veuillez uniquement saisir des lettres"
                   e.preventDefault()
            }

            else if (RegexName.test(firstNameInput.value) === true){
                  firstNameErrorMsg.innerHTML = " ";
            }
      }
  


      const checkLastName = function()
      {
            const lastNameErrorMsg = document.getElementById('lastNameErrorMsg')

           if(RegexName.test(lastNameInput.value) === false)
           {
            lastNameErrorMsg.innerHTML = "Veuillez uniquement saisir des lettres"
            e.preventDefault()

           }

           else if (RegexName.test(lastNameInput.value) === true){
                 lastNameErrorMsg.innerHTML = " ";
           }

      }
      


      const checkAddress = function ()
      {
            const addressErrorMsg = document.getElementById('addressErrorMsg')

            if(RegexAdress.test(addressInput.value) === false)
            {
                  addressErrorMsg.innerHTML = "L'adresse saisi est incorrecte"
                  e.preventDefault()
            }

            else if(RegexAdress.test(addressInput.value) === true){
                  addressErrorMsg.innerHTML = "";
            }
            
          
      }



      const checkCity = function () 
      {
            const cityErrorMsg= document.getElementById('cityErrorMsg')

            if(RegexCity.test(cityInput.value) === false)
            {
                  cityErrorMsg.innerHTML = "Veuillez saisir un nom de ville correcte"
                  e.preventDefault()
            }

            else if(RegexCity.test(cityInput.value) === true){
                  cityErrorMsg.innerHTML = "";
            }
     
          
      }

     

      const checkEmail = function () 
      {
            const emailErrorMsg= document.getElementById('emailErrorMsg')

            if(RegexEmail.test(emailInput.value) === false)
            {
                  emailErrorMsg.innerHTML = "Veuillez saisir une adresse mail correcte"
                  e.preventDefault()
            }

            else if(RegexCity.test(emailInput.value) === true){
                  emailErrorMsg.innerHTML = "";
            }
    
      }

     


      checkFirstName()
      checkLastName()
      checkAddress()
      checkCity()  
      checkEmail()  
   
     
}) 

           

// /**END OF FORMULAIRE */

})

<form method="get" class="cart__order__form">
                <div class="cart__order__form__question">
                  <label for="firstName">Prénom: </label>
                  <input type="text" name="firstName" id="firstName" required>
                  <p id="firstNameErrorMsg"><!-- ci est un message d'erreur --></p>
                </div>
                <div class="cart__order__form__question">
                  <label for="lastName">Nom: </label>
                  <input type="text" name="lastName" id="lastName" required>
                  <p id="lastNameErrorMsg"></p>
                </div>
                <div class="cart__order__form__question">
                  <label for="address">Adresse: </label>
                  <input type="text" name="address" id="address" required>
                  <p id="addressErrorMsg"></p>
                </div>
                <div class="cart__order__form__question">
                  <label for="city">Ville: </label>
                  <input type="text" name="city" id="city" required>
                  <p id="cityErrorMsg"></p>
                </div>
                <div class="cart__order__form__question">
                  <label for="email">Email: </label>
                  <input type="email" name="email" id="email" required>
                  <p id="emailErrorMsg"></p>
                </div>
                <div class="cart__order__form__submit">
                  <input type="submit" value="Commander !" id="order">
                </div>
              </form>

​

我正在使用API，所以HTML不工作--它只是向您展示get方法用于恢复url中的数据，然后将其发送到后端以获取orderId。

Answer 1

由于我的网站和网络窗口打开了一个空白，给我的错觉是请求被延迟了，我只是关闭了网络窗口，在那里我们可以检查请求的状态和它的工作。