根据用户输入运行多个AJAX请求

时间:2018-09-03 19:52:45

标签: javascript jquery full-text-search .when

我正在基于Tipue创建一个现场搜索引擎小部件。该窗口小部件将在WYSIWYG编辑器上使用,用户可以在其中将窗口小部件加载到编辑器中,并将URL放置在应建立索引的网站内。为了使提示起作用,需要创建具有可搜索页面内容的对象。例如,这是示例中使用的Tipue的默认对象:

var tipuesearch = {"pages": [
 {"title": "Tipue", "text": "Tipue is a small web development studio based in North London.", "url": "http://www.tipue.com"}, 
 {"title": "Tipue Search, a jQuery Site Search Plugin", "text": "Tipue Search is a site search jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery. It doesn't need MySQL or similar. It doesn't even need a web server.", "img": "http://www.tipue.com/img/surface.jpg", "tags": "JavaScript", "url": "http://www.tipue.com/search"},
 {"title": "Tipue Search Help", "text": "Tipue Search help. Tipue Search is a site search jQuery plugin. It's free, open source, responsive and fast. What is Tipue Search? Getting Started. Using Tipue Search. Options.", "img": "http://www.tipue.com/img/elvis.jpg", "url": "http://www.tipue.com/search/help"},
 {"title": "Tipue Search demo", "text": "Tipue Search demo. Try searching for Tipue.", "url": "http://www.tipue.com/search/demo"},
 {"title": "About Tipue", "text": "Tipue is a small web development studio based in North London, founded in 2001. We design innovative and original jQuery plugins and add-in code. We talk to MySQL and similar with heavy-duty Perl. Our work breathes.", "url": "http://www.tipue.com/is"},     
 {"title": "Tipr, a Small and Simple jQuery Tooltip Plugin", "text": "Small, simple, flat, cool. Tipr is a jQuery tooltip plugin. It works on almost any element, and it's free and open source. Tipr displays nice tooltips, and it's around 3KB, CSS included. The tooltips can appear on almost any HTML element. Tipr reacts to the size of the viewport.", "img": "http://www.tipue.com/img/glow.jpg", "tags": "JavaScript", "url": "http://www.tipue.com/tipr"},
 {"title": "Tipue Support", "text": "We offer a range of flexible support plans for our jQuery plugins, including free. We hope to continue offering excellent free support. Get it by talking to us on Twitter.", "url": "http://www.tipue.com/support"},     
 {"title": "Getting Started with Tipue Search", "text": "Download Tipue Search and copy the tipuesearch folder to your site. You should look at the demo included with Tipue Search. You should first create a search page. The site content is stored in the tipuesearch_content.js file. It contains the search data as a JavaScript object.", "note": "<a href='http://www.tipue.com/search/help/'>From Help</a>", "url": "http://www.tipue.com/search/help/?d=1"},
 {"title": "Content for Tipue Search", "text": "The search data for Tipue Search is contained in the tipuesearch JavaScript object. Usually this is stored in the tipuesearch_content.js file, but it doesn't have to be. You can create a JavaScript object for your website with Beaty.", "note": "<a href='http://www.tipue.com/search/help/'>From Help</a>", "url": "http://www.tipue.com/search/help/?d=2"},
 {"title": "Beaty", "text": "Beaty is a web scraper that grabs content from your website and returns the data as a JavaScript object, JSON or CSV. Beaty is for small to medium websites, and there's a limit of 70 pages. English is the only language supported.", "tags": "Tipue", "url": "http://www.tipue.com/beaty"},
 {"title": "The Complete Guide to Centering a Div", "text": "Every developer inevitably finds that centering a div isn't as obvious as you'd expect. Centering what's inside a div horizontally is easy but then things tend to get a bit sticky. When you get to centering a div vertically, you can end up in a world of CSS hurt.", "tags": "Tipue Features", "url": "http://www.tipue.com/blog/center-a-div"},
 {"title": "Using Vw and Vh", "text": "Viewport width (vw) and viewport height (vh) are viewport-percentage values introduced in CSS3. Given how powerful they are, and with almost complete browser support, they should be everywhere.", "tags": "Tipue Features", "url": "http://www.tipue.com/blog/css3-vw-vh"},     
 {"title": "Using CSS Feature Queries", "text": "CSS feature queries are now supported everywhere. They allow you to use cutting edge CSS with subtle and precise feature detection.", "tags": "Tipue Features", "url": "http://www.tipue.com/blog/feature-queries"},     
 {"title": "A Very Simple CSS Background Zoom", "text": "A really easy method of creating a CSS background image zoom. Not only is this simple, it comes with wide browser support.", "tags": "Tipue Features", "url": "http://www.tipue.com/blog/css-background-zoom"},
 {"title": "Using Z-index", "text": "The CSS z-index property often trips up both new and experienced developers. The aim of this article is to boil down a somewhat-complex specification to three major points, which should ease most z-index pain.", "tags": "Tipue Features", "url": "http://www.tipue.com/blog/z-index"}

]};

问题是我要构建的东西必须适合放置小部件的多个不同站点。我也无权访问数据库。窗口小部件应放置的网站通常不会超过15页。所有站点都加载了jQuery库,因此我认为我可以只使用jQuery。

这是我对事件顺序的思考过程:

  1. 单击搜索按钮后,对用户在后端插入的每个URL进行AJAX调用
  2. 从HTML提取文本并将其插入可搜索的对象
  3. 在通话结束时运行Loader动画
  4. 返回搜索结果

现在,我被困在第一项上。我当时想最好的方法是使用$ .when,但是我遇到了一个问题,我需要运行未知数量的AJAX调用。

作为一个简单的示例,下面您可以看到,我基于两个页面运行两个get请求,但是我需要这些基于用户输入的项目来获取这些请求,并且我不确定如何运行遍历$ .when:

$.when( $.get( "/services" ), $.get('/about-us') ).then(function( data) {
  console.log( data ); // Alerts 200
});

任何帮助将不胜感激。谢谢!

0 个答案:

没有答案