获取HTMLclass的值，然后放入一个input元素中

Question

我一直在尝试获取 ip 地址的值，它已经在 <p id='details'></p> 中以放入输入的值 html class 中也找到了在最后一行。

我尝试将其声明为 php 变量，但我负担不起。

<script>
    var ipinfo;
    $.getJSON("https://ipinfo.io", function (data) {
    $("#details").html(data.ip)
    })
</script>
    
<p id='details'></p>
    
<input type="text" name="ip" class="" value="@php echo ""; @endphp" readonly>

Answer 1

您可以首先通过将值复制到变量中来获取特定 HTML class 的内容，然后通过将复制的变量值分配给输入的变量来注入该值价值。您可以通过使用普通香草 JavaScript.

来实现此目的

由于您的 p 标签最初是空的，并且数据是在从网络获取数据后注入到 p 标签中的，因此此过程成为异步任务。因此，您希望仅在获取数据后才提供数据，因此您可以在获取函数中添加值分配逻辑，如下所示：

    var ipinfo;
    $.getJSON("https://ipinfo.io", function (data) {
      document.querySelector("#details").innerHTML = data.ip

      const inject = document.querySelectorAll("input[type=text]")[0] //Identify the input element

      inject.value = data.ip //Assign the returned value to input's value.
    })

由于您希望将 fetch 的返回值提供给 p 标签内容以及输入标签值，您可以直接分配它，而不是复制已经复制的值。

Answer 2

据我所知，您只需要一个令牌。

此外，我使用 ES6 获取方法来获取 API 对象响应

fetch('https://ipinfo.io/json?token=e0b12a7d02537a').then(
    (response) => response.json()
).then(
    (jsonResponse) => {
        //this will display the IP as a p elemenet text
        $('#details').html('IP Address = ' + jsonResponse.ip)
        //here we are assigning it as a value to the input
        $('input[name="ip"]').val(jsonResponse.ip);
    }
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id='details'></p>

<input type="text" name="ip" class="" readonly>

获取HTMLclass的值，然后放入一个input元素中

Get the value of HTML class, then put in in an input element

javascript

laravel-blade