开发者问题收集

如何将获取响应保存为输入值

2020-04-28
722
javascript fetch

我正在尝试捕获客户端 IP 地址并自动将其存储为输入字段内的值。这是我目前的代码： 

var Ip;
fetch('https://api.ipify.org/?format=json')
  .then(res => res.json())
  .then(data => Ip = data.ip)
  .then(() => console.log(Ip))
  .then(() => document.getElementById('awf_field-106493013').value = Ip);

这返回了错误：

Uncaught (in promise) TypeError: Cannot set property 'value' of null

.value 是它不喜欢的代码位，这似乎意味着 awf_field-106493013 为空，但我知道在调用此函数时输入已填充，我确信这是正确的输入 ID。

我遗漏了什么？

编辑 输入如下所示： 

<label class="previewLabel" for="awf_field-106493013">ipaddress:</label>
<div class="af-textWrap"><input type="text" id="awf_field-106493013" class="text" name="custom ipaddress" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="503" /></div>

这都是在 javascript 代码之前调用的，因此它应该在那里。

编辑 2 这是我页面上目前拥有的所有 javascript，我只是这样做了，当文档准备好时，然后 fetch 制作： 

<script type="text/javascript">
function getUrlParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var tid = getUrlParam("adid");
var date = Date(Date.now());

jQuery(document).ready(function () {
  setIp();

  jQuery('#awf_field-106493014').val(date.toString()); //Time
  if (tid != null) {
    jQuery('#awf_field-106493015').val(tid.toString()); //Tid
  } else {
    jQuery('#awf_field-106493015').val("nulltid"); //Tid
  }
});

function setIp(){
  var Ip;
  fetch('https://api.ipify.org/?format=json')
    .then(res => res.json())
    .then(data => Ip = data.ip)
    .then(() => console.log(Ip))
    .then(() => document.getElementById('awf_field-106493013').value = Ip);
}
</script>

返回相同

3个回答

问题中的代码对我有用 - 运行代码片段。最后一行 JS 使用了目标输入字段的替代选择器，但原始行（此处注释掉）同样有效。 

function getUrlParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var tid = getUrlParam("adid");
var date = Date(Date.now());

jQuery(document).ready(function () {
  setIp();

  jQuery('#awf_field-106493014').val(date.toString()); //Time
  if (tid != null) {
    jQuery('#awf_field-106493015').val(tid.toString()); //Tid
  } else {
    jQuery('#awf_field-106493015').val("nulltid"); //Tid
  }
});

function setIp(){
  var Ip;
  fetch('https://api.ipify.org/?format=json')
    .then(res => res.json())
    .then(data => Ip = data.ip)
    .then(() => console.log(Ip))
    .then(() => document.querySelector('*[name="custom ipaddress"]').value = Ip);
// was:        .then(() => document.getElementById('awf_field-106493013').value = Ip);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="previewLabel" for="awf_field-106493013">ipaddress:</label>
<div class="af-textWrap"><input type="text" id="awf_field-106493013" class="text" name="custom ipaddress" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="503" /></div>

备注

这不是真正的答案。它有助于解决 OP 的问题，之后将被修改或删除

collapsar
2020-04-28

通过修改 https://api.ipify.org/?format=json 解决了该问题，它会向 https://api.ipify.org/ 返回某种奇怪的 json 对象，而根据其文档，它会返回标准 text 回复。

Ethan
2020-04-29

您用来获取 IP 的 URL 在我的计算机上不起作用，更换 API 提供程序后，现在可以正常工作。 

<label class="previewLabel" for="awf_field-106493013">ipaddress:</label>
<div class="af-textWrap">
    <input type="text" id="awf_field-106493013" class="text" name="custom ipaddress" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="503" />
</div>
<script>
var Ip;
fetch('http://ip-api.com/json/?fields=status,query')
  .then(res => res.json())
  .then(data => Ip = data.query)
  .then(() => console.log(Ip))
  .then(() => document.getElementById('awf_field-106493013').value = Ip);
</script>
yoss
2020-04-28