我试图制作一种很酷的自动IMDB ID抓取器,当你输入电视节目名称时自动抓取ID,到目前为止我所得到的只是检查字段是否为空如果它不为空,它将显示一个您按下的按钮,该按钮会将您带到一个包含 ID 的页面,您可以将其手动复制并粘贴到字段中。
是否可以使其自动抓取您在字段中输入的内容,实时,将其放在链接的末尾,例如:http://example.com?show=<UserEnteredShow>
它会自动在后台进入并复制所有浏览器可见的文本,然后将其放入另一个字段中。
我知道这太过分了,但我真的很想看到这种情况发生。我不知道从哪里开始。
最佳答案
只需使用 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."/>
关于javascript - 自动复制和粘贴 - Ajax/JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32167040/