Выполнение нескольких запросов AJAX на основе пользовательского ввода - PullRequest
Новая
       30

Выполнение нескольких запросов AJAX на основе пользовательского ввода

0 голосов
/ 03 сентября 2018

Я создаю виджет поисковой системы на основе 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. После нажатия кнопки поиска выполните вызов AJAX для каждого URL-адреса, вставленного пользователем в серверную часть
  2. Взять текст из HTML и вставить его в объект поиска
  3. Запуск анимации загрузчика во время завершения вызовов
  4. Вернуть результаты поиска

Прямо сейчас я застрял на 1-м предмете. Я думал, что лучший способ сделать эту работу - использовать $ .when, но я столкнулся с проблемой, когда мне нужно выполнить неизвестное количество вызовов AJAX.

В качестве простого примера, как вы можете видеть ниже, я выполняю два запроса get, основанные на двух страницах, но мне нужно, чтобы они получали эти запросы на основе элементов, введенных пользователем, и я не уверен, как запустить цикл через $ .when: 

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

Любая помощь будет оценена. Спасибо!

...