將表單輸入與JSON對象進行比較

Question

我有一個彈出模式，顯示在頁面加載中，具有以下形式：

<form class="enterForm">
    <label class="modalFields" id="userName" style="display: none;">
        <span>user Number :</span>
        <input type="text" name="userNum" placeholder="User Number" required/>
    </label>
</form>

<label>
    <span>&nbsp;</span>  
    <input type="submit" value="Submit" class="submitButton">
    <input type="hidden" id="hiddenInput">
</label> 

在用戶提交表單時，我想通過AJAX調用來打入某個API，該調用返回的JSON如下所示：

{  
   "results":[  
      {  
         "person":{  
            "firstName":"John",
            "lastName":"Smith"
         },
         "userNumber":"12345"
      }
   ]
}

如果userNumber與用戶提交的值匹配，那么我想更新導航欄以說出該人的名字。 就流程而言，我希望它能夠執行：用戶類型輸入用戶編號->提交表單-> AJAX調用命中API->檢查用戶輸入是否與JSON中的userNumber值匹配->如果匹配，則選擇firstName值並在導航欄中更新它。 我該如何實現這一目標？

Answer 1

考慮到您知道如何進行AJAX調用，並且您正在使用API​​，因此集成jQuery來簡化操作應該不會太難（如果可以的話，在解決方案之后我還會提供其他信息）。

解

的JavaScript

//On form submit
$('#enterForm').submit(function(){
  var userNum = $('[name="userNum"]').val();

  //AJAX call to your API
  $.ajax({
    url: 'myAPICall.php',
    /* data: {userNumber: userNum}, //If necessary */
    success: function(data) {
        // Note: this code is only executed when the AJAX call is successful.
        if(data.results.userNumber == userNum){
            $('#navBarFirstName').text(data.results.person.firstName);
        }
    },
    error: function (err) {
      //If the AJAX call fails, this will be executed.
      console.error(err); 
    }
    dataType: 'JSON'
  });

  return false; //Prevents the page refresh if an action is already set on the form.
});

說明

您使用jQuery將函數（事件偵聽器）綁定到表單的submit事件。

觸發submit事件時，該函數運行：

• 它使用名稱屬性“ userNum ”獲取DOMElement的值。
• 它將對您的API進行AJAX調用（有/無userNum值，您可以選擇是否要在服務器端進行檢查）
• 成功時（成功完成調用后），它將使用.text()和JSON響應的firstName屬性更新導航欄內容。

---

包括jQuery

您可以通過將腳本包含在HTML頁面中來集成jQuery。 您可以下載它或使用CDN ：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">
/* Don't put your code in here it won't be parsed */
</script>

<!-- the following tag could also be <script src="link/to/your/script.js"></script> -->
<script>
 /* Your actual script */
</script>

請確保將此行放在包含上述腳本的實際javascript文件之前，否則jQuery將不會初始化並且該腳本將無法工作。