Question

我在HTML中有一个表单字段，我想收集用户的输入，将其存储在变量中，然后传递给调用Google Custom Search API的src标记。有没有办法只在前端工作呢？

形式：

<body>
  <form id="InputForm" method="post" >
    <fieldset>
      <legend>Input Form</legend>
      <div>
        <label for="Task">To do...</label>
        <input type="text" id="Task" value="" style="width: 600px;" />
      </div>
      <div class="submitLabel" style="margin-left: 425px;">
        <label>&nbsp;</label>
        <input type="submit" value="Submit"/>
      </div>
    </fieldset>
  </form>
</body>

和src标签：

<script src="https://www.googleapis.com/customsearch/v1?key=MYKEY&amp;cx=017576662512468239146:omuauf_lfve&amp;q=VARIABLEHERE&amp;callback=hndlr">

我尝试使用getElementByID将用户输入存储在变量中，但尝试在src属性中插入变量时没有成功。

    var param = document.getElementById("Task").value;
    var script = document.createElement("script");
    script.src = "https://www.googleapis.com/customsearch/v1?key=MYKEY&amp;cx=017576662512468239146:omuauf_lfve&amp;q='+param+'&amp;callback=hndlr"
    document.getElementsByTagName("script")[0].parentNode.appendChild(script);

hndlr函数格式化并显示API返回的结果。它在我使用预定义的q参数时有效。

Answer 1

如果您已经拥有了所需数据的变量，那么很容易将其插入到脚本标记的src属性中。

您可以使用jquery使用自定义src属性创建新的脚本标记：

var myData = "ThisDataHere";
$('<script>').attr({
    src: 'https://www.googleapis.com/customsearch/v1?key=MYKEY&amp;cx=017576662512468239146:omuauf_lfve&amp;q='+myData+'&amp;callback=hndlr',
    type: 'text/javascript'}).appendTo('body')

将用户输入作为参数传递给html中的src

1 个答案: