Question

所以我试图制作一个Chrome扩展程序，以查询的形式接收用户输入，为与该查询相关的图像擦除Flickr的API（有效地搜索它以查询查询），然后放置它们，以及作为其位置的链接，进入页面。我从一个教程站点偷了它，其示例扩展在没有用户输入和链接的情况下完成了上述操作。我试图自己做链接，我惨遭失败，所以不得不在这里得到帮助。现在，我在设置用户输入时失败了。我第一次尝试PHP，它崩溃了我的chrome，因为它显然无法在扩展中工作，所以现在我正试图一直使用JS。我尝试为我的搜索表单执行onsubmit事件，然后我意识到我必须在我的onsubmit函数的{}中包含所有代码。不幸的是，由于在JavaScript中声明变量的方式，它不起作用，因为如果所有内容都在函数内部，则声明的所有变量都呈现为 private 。因此，主要内部的其他功能无法使用它们，使脚本无用。理想的解决方案是在函数内部声明公共变量，不幸的是，在搜索了半个小时后，我找不到任何可行的方法/我理解。有人可以帮帮我吗？我会对任何其他方法感到非常满意，因为如果你告诉我我的所有预后都是错误的以及为什么我会这么做 - 我就是这样的一个菜鸟。

到目前为止我的代码：

var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
    "method=flickr.photos.search&" +
    "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
    "text=cake&" +
    "safe_search=1&" +  
    "content_type=1&" +  
    "sort=relevance&" +  
    "per_page=24",
true);
req.onload = showPhotos;
req.send(null);


function showPhotos() {
  var photos = req.responseXML.getElementsByTagName("photo");

  for (var i = 0, photo; photo = photos[i]; i++) {
    var photos = req.responseXML.getElementsByTagName("photo");
    var a = document.createElement("a");
    a.setAttribute("href",constructImageURL(photo));
    a.setAttribute("target","_blank");

    var img = document.createElement("img");
    img.setAttribute("src",constructImageURL(photo));

    a.appendChild(img);
    document.getElementById("images").appendChild(a);
  }
}

function constructImageURL(photo) {
  return "http://farm" + photo.getAttribute("farm") +
  ".static.flickr.com/" + photo.getAttribute("server") +
  "/" + photo.getAttribute("id") +
  "_" + photo.getAttribute("secret") +
  "_s.jpg";
}

这没有我失败的onsubmit代码。 HTML页面本身只包含导入上述脚本的标签，图像的div和表格：

<div id="images">
</div>
<form name="queryForm" onsubmit="javascript: querySubmit()">
Search: <input type='text' name='query'>
<input type="submit" />
</form>

有人可以帮忙吗？

Answer 1

这就是我讨厌jQuery的原因..请参阅我的HTML 5表单示例......

http://netjs.codeplex.com/SourceControl/changeset/view/91818#1775033

http://netjs.codeplex.com/SourceControl/changeset/view/91818#1775035

您需要向表单添加一个事件，例如

myform.addEvent('submit', myFunction);

然后从那里处理你需要做的事情......

当然jQuery几乎没有这个和它更有可能因为你不理解jQuery哪个jQuery有利，因为它把所有东西都变成了像狗屎一样的DOM。您只是使用不良做法，并且需要将逻辑分离为各种维护功能。

JavaScript onSubmit表单处理

1 个答案: