javascript - 自动复制和粘贴 - Ajax/JS

Question

我试图制作一种很酷的自动IMDB ID抓取器，当你输入电视节目名称时自动抓取ID，到目前为止我所得到的只是检查字段是否为空如果它不为空，它将显示一个您按下的按钮，该按钮会将您带到一个包含 ID 的页面，您可以将其手动复制并粘贴到字段中。

是否可以使其自动抓取您在字段中输入的内容，实时，将其放在链接的末尾，例如:http://example.com?show=<UserEnteredShow>它会自动在后台进入并复制所有浏览器可见的文本，然后将其放入另一个字段中。

我知道这太过分了，但我真的很想看到这种情况发生。我不知道从哪里开始。

Answer 1

只需使用 AJAX 获取 PHP 文件的值即可。如果您确实是 AJAX 新手，我建议使用 $.ajax()这需要 jQuery .

每当用户在第一个 <input> 中输入内容时，我们只需向服务器发送 AJAX 请求并将响应放入第二个输入中。

我认为 Stack Overflow 不允许在代码片段中使用 AJAX，因此请将以下代码片段放入 HTML 文件中并在您的网站上进行测试:

//Our <input> elements
var toLink = document.getElementById("put-at-end-of-link");
var fromAjax = document.getElementById("copy-from-ajax-request");

//When the value of toLink changes, update fromAjax:
toLink.addEventListener("input", function () {
    //Send an AJAX request to /id.php:
    $.ajax({
        url: "/id.php",
        //This is a GET request:
        type: "GET",
        //We do not want to cause the user lag while we're sending this request, so set async to true:
        async: true,
        data: {name: toLink.value},
        success: function(response) {
            //Once we're done with the response, put it into fromAjax:
            fromAjax.value = response;
        }
    });
});

/* Make the input takes up the full screen width and give them some vertical space: */
input {
    width: 100%;
    margin: 1em 0;
}

<!--Remember to include the jQuery!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--The input elements:-->
<input type="text" id="put-at-end-of-link" placeholder="This is where the user enters the value to be sent to /id.php."/>
<input type="text" id="copy-from-ajax-request" placeholder="This is where we output the response from /id.php."/>