文章/答案/技术大牛

发布

社区首页 >问答首页 >表单输入与JSON对象的比较

问表单输入与JSON对象的比较
EN

Stack Overflow用户

提问于 2015-09-01 13:36:25

回答 1查看 1.8K关注 0票数 0

我有一个弹出模式，它显示在页面加载上，其中包含以下形式：

<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值并在导航栏中更新它。我怎样才能做到这一点呢？

ajax

json

javascript

jquery

回答 1

Stack Overflow用户

发布于 2015-09-01 13:48:10

考虑到您知道如何进行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将无法初始化，脚本也无法工作。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32333117

复制

相似问题

问表单输入与JSON对象的比较
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单输入与JSON对象的比较EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单输入与JSON对象的比较
EN