重定向表格 URL JAVASCRIPT

Question

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

效果很好，但是当我按下发送按钮时重定向没有完成，只是我想在单击按钮时执行此重定向，

我想说明我在promise中使用async和await方法（我还不熟悉这些方法）所以我想知道当时是否可以进行重定向或将表单发送到后端还是简单地减少 promise 的时间？

我尝试使用 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

由于我的网站和网络 window 打开了一个缺口让我产生了请求被延迟的错觉，我只是关闭了网络 window 我们可以在其中检查请求的状态并且它有效

重定向表格 URL JAVASCRIPT

Redirect FORM URL JAVASCRIPT

javascript

forms

url

get

promise