Question

虽然弄乱了一些用户界面，却让我意识到我觉得我经常倒退。

在HTML中，我有一个包含某些字段的表单，并且提交了＃39;它做X. 我已经养成了X启动后的习惯，它为每个输入的val赋值。

然后我动态调用数据。虽然这有效，但我觉得有更好的方法来解决这个问题。

HTML

<form>
  <input type="text" name="charName" id="charName">
  <input type="text" name="charServer" id="charServer">
  <button type="button" id="submitForm">Submit</button>
</form>
<div id="results">
</div>

JS

$(document).ready(function(){

  $('#submitForm').click(function(){
    var myHeaders = new Headers();

var myInit = { method: 'POST',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };
  var name = $("#charName").val();
  var server = $("#charServer").val();
  fetch('mySitesAPI'+server+'/'+name, myInit)
   .then(function(res){
     return res.text()
   }).then(function (res) {
    res = JSON.parse(res);
     $("#results").html("<div class='results'><div class='resName'>"
                        +res.name+"</div><div class='servName'>"
                        +res.realm+"</div><div class='resClass'>"
               +res.class+"</div><img src='linkToSiteForImages"
                        +res.thumbnail+"'/></div>");
     console.log(res)
   });
  });
});

我觉得如果我在表单按钮上做某事，不应该将数据绑定到它吗？欢迎建议/输入。此外，我觉得res.test（）的方法然后重新JSON.Parsing它是反直觉的，但我有一个问题是将数据以其他方式获取到数组中。

Here is a CodePen for reference

注意*我稍微弄乱了我的代码的前端部分，所以我使用JS从我的网站提取数据。这是奇怪的fetch（）情况。

轻松使用表单数据进行AJAX调用

0 个答案: