[JAVA] [Rails] Recherche de livres (communication asynchrone) avec l'API Amazon PA v5.0
Ceci est la suite de cet article.
La dernière fois, le fichier de vue était affiché après la liaison avec l'API, mais cette fois, les données sont acquises par communication ajax et les résultats de la recherche de livres sont affichés. (La raison est que c'est plus cool lol)
Image complète
(L'apparence a été légèrement ajustée avec le CSS, l'apparence est un peu différente de l'article précédent)
Flux de processus
Si vous remplissez le formulaire de recherche et appuyez sur le bouton de recherche (soumettre), il sera traité comme suit
- Obtenez des mots-clés dans le formulaire de recherche
- Avoir des données (mots-clés) au format json et demander à l'URL spécifiée (communication ajax)
- Traitez la liaison API avec le contrôleur et transmettez les données avec json
- Utilisez les données renvoyées pour réécrire le code HTML et afficher les résultats de la recherche
Chaque dossier
manette
Il est nécessaire d'écrire que la réponse est renvoyée au contrôleur avec json.
À respond_to ~
searches_controller
class SearchesController < ApplicationController
before_action :call_client, only: :index
def index
si = @client.search_items(keywords: keyword_params, SearchIndex: "Books")
@items = si.items
respond_to do |format|
format.html
format.json
end
end
private
def call_client
require 'paapi'
@client = Paapi::Client.new(access_key: Rails.application.credentials[:pa_api][:access_key_id],
secret_key: Rails.application.credentials[:pa_api][:secret_key],
market: :jp,
partner_tag: Rails.application.credentials[:pa_api][:associate_tag])
end
def keyword_params
params.require(:keyword)
end
end
jbuilder
Créez ʻindex.json.jbuilder dans views / [répertoire avec le même nom que le nom du contrôleur] . Cette fois, search_controller.rb est créé directement sous controllers, donc ce sera vues / recherches / index.json.jbuilder`.
Puisque les données json sont cette fois un tableau, il est nécessaire d'écrire comment traiter chaque élément. Les données à extraire sont les informations de l'image, du titre, de l'auteur et de l'éditeur.
ruby:index.json.jbuilder
json.array! @items do |item|
json.image_url item.image_url
json.title item.title
json.authors item.authors
json.publisher item.publisher
end
fichier js
api-search.js
//Écrire en utilisant jQuery
$(function() {
//Fonction d'affichage des résultats de recherche
let search_list = $("#books")
function appendBook(image_url, title, author, publisher) {
const html = `<div class="search-book-content">
<div class="book-image">
<img class="book-image" src="${image_url}">
</div>
<div class="right-content">
<div class="book-info">
<div class="book-info__title">
${title}
</div>
<div class="book-info__author">
${author}
</div>
<div class="book-info__publisher">
${publisher}
</div>
</div>
</div>
</div>`
search_list.append(html);
}
//Fonction d'affichage recherchée
function dispLoading(msg){
let dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
$("body").append("<div id='loading'>" + dispMsg + "</div>");
}
//Fonction pour désactiver l'affichage pendant la recherche
function removeLoading(){
$("#loading").remove();
}
//L'événement se déclenche lorsque le bouton de recherche est enfoncé
$("#book-search-form").on("submit", function(e) {
e.preventDefault();
const keyword = $("#keyword").val();
dispLoading("Recherche...");
//détails de la communication ajax
$.ajax({
url: '/searches',
type: 'GET',
data: {'keywords': keyword},
dataType: 'json',
timeout: 10000
})
//Quand ajax fonctionne
.done(function(items){
$(".search-book-content").remove();
items.forEach(function(item){
let image_url;
let author;
let publisher;
if (item.image_url == null) {
image_url = `/assets/no_image-267acfcb976ba4942183409c682b62a768afb48c328b6ba60de7b57fd83c3b56.png`
} else {
image_url = item.image_url
}
if (item.authors.length == 0) {
author = 'Auteur inconnu'
} else {
author = `${item.authors[0]}`
}
if (item.publisher == null) {
publisher = 'Éditeur inconnu'
} else {
publisher = item.publisher
}
let title = item.title
appendBook(image_url, title, author, publisher);
})
})
//Quand ajax échoue
.fail(function(){
alert("La recherche a échoué");
})
//Traitement commun, que Ajax réussisse ou échoue
.always( function(data) {
//Lading Effacer l'image
removeLoading();
});
});
})
Comme vous pouvez le voir en lisant le code, écrivons le flux de processus.
■ Définition des fonctions
- appendBook
Fonction pour créer du HTML basé sur les données du livre - dispLoading
Fonction pour afficher le fichier gif recherché - removeLoading
Fonction pour masquer le fichier gif recherché
■ Événement
- Déclenchez un événement avec une action d'envoi
- Obtenez les mots-clés saisis dans le formulaire
- Affichez l'écran recherché
- Demande de communication ajax (spécifiez l'URL et les données de transmission)
- Traitement lorsque la communication ajax est réussie
Faire de chaque donnée une variable et l'alimenter dans la fonction appendBook (Si les données ne peuvent pas être obtenues, assurez-vous que des données telles que des auteurs inconnus sont entrées) - Traitement en cas d'échec de la communication ajax
- Supprimez l'image recherchée en tant que processus courant
Comme la recherche prend un peu de temps, j'essaie d'afficher une image gif pendant la communication ajax afin qu'il soit facile de comprendre que la recherche est en cours.
De plus, si la recherche prend trop de temps, une erreur se produit. (10 secondes) Si vous continuez à chercher, l'utilisateur sera inquiet.
Écran de recherche (fichier css)
fichier css
#loading {
display: table;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
opacity: 0.8;
}
#loading .loadingMsg {
display: table-cell;
text-align: center;
vertical-align: middle;
padding-top: 140px;
background: image-url("loading.gif") center center no-repeat;
}
Il existe plusieurs sites où vous pouvez créer des fichiers gif gratuitement, alors créons-en un. Je l'ai fait sur ce site.
Note
Notez la partie qui n'a pas fonctionné. (Je vous serais reconnaissant si vous pouviez m'en dire plus à ce sujet ...)
-
Je veux vraiment utiliser uniquement keyword_params comme argument
Lorsque je frappe une API basée sur des mots-clés sur le contrôleur, si je le passe au format de hachage en tant quekeyword_paramsà l'argument de search_items, c'est rafraîchissant, mais pour une raison quelconque, cela n'a pas fonctionné. .. (On a l'impression que vous ne le recevrez pas s'il s'agit d'un hachage actif ...) -
Cela ne fonctionne pas bien lorsque les turbolinks sont désactivés.
Il semble que la communication ajax puisse ne pas fonctionner si les turbolinks sont inclus, donc je l'ai configuré pour ne pas l'utiliser tout le temps, mais au contraire, la communication ajax fonctionne bien car il n'y a pas de turbolinks Je n'y suis pas allé lol. Je ne comprends pas vraiment comment fonctionne ce domaine ...
Recommended Posts