jQuery Girl
  1. jQuery Girl
  3. Jquery ajax et méthode du contrôleur
Intereting Posts
Comment détecter quand iframe commence à charger une autre page? Puis-je remplacer jQuery .val () pour seulement certains éléments d’entrée? Rappel de chargement d’image jQuery Utilisation de jQuery, comment définir le contenu d’une zone de texte lorsque la valeur de MySQL contient des nouvelles lignes Comment prendre plusieurs images et pousser tableau Pourquoi windows.onload est exécuté plusieurs fois? jQuery actualise automatiquement chaque minute en fonction de la seconde fois de repos en cours JQuery – impossible de transmettre formData avec d’autres parameters Comment accéder à la variable à l’intérieur d’un bloc Chargement côté serveur ou côté client (AJAX) WordPress, Comment puis-je append des messages AJAX Requête JQuery AJAX se comportant de manière synchrone pour une raison inconnue bootstrap multiselect (refresh) ne fonctionne pas correctement MVC aller à l’onglet spécifique en utilisant Jquery jQuery change la couleur du texte de la cellule de la table en fonction du texte

Jquery ajax et méthode du contrôleur

J’ai cette méthode de contrôleur: 

def create render plain: params[:article].inspect #@article = Article.new(article_params) #@article = Article.create(article_params) #if @article.save # redirect_to @article #else # render 'new' #end end

Et cette requête ajax jQuery: 

 function ajaxsend() { $.ajax({ url: "/articles", type: "POST", data: { "article": { "title": "acme", "text": "text of the article" } }, success: function(resp){ } }); }

Mais après avoir cliqué sur le bouton qui lance l’exécution, je ne reçois rien. J’attends le rendu mais rien ne se passe, pas même une erreur dans la console. Qu’est-ce que je fais mal? Je ne comprends pas comment envoyer des données avec jquery ajax au contrôleur. De l’aide? Je suis nouveau dans le développement de ruby ​​on rails. Version rbuy: 2.1.2; Version de Rails: 4.1.5;

Edit1:

Cela fonctionne bien, quand je le fais de la manière traditionnelle sous la forme:

entrez la description de l'image ici

Résultat:

entrez la description de l'image ici

Edit2:

Le serveur WEBrick l’imprime lorsque j’appuie sur le bouton: 

 Started POST "/articles" for 127.0.0.1 at 2014-09-14 09:43:36 +0100 Processing by ArticlesController#create as */* Parameters: {"article"=>{"title"=>"acme", "text"=>"123 Carrot Street"}} Rendered text template (0.0ms) Completed 200 OK in 1ms (Views: 0.4ms | ActiveRecord: 0.0ms)

Il semble ok. Pourquoi rien ne se passe dans le navigateur? Pourquoi la méthode de rendu dans la création ne fonctionne pas? De l’aide?

La réponse de WEBrick lorsque je remplis le formulaire et que je clique sur Créer un article: 

 Started POST "/articles" for 127.0.0.1 at 2014-09-14 09:52:21 +0100 Processing by ArticlesController#create as HTML Parameters: {"utf8"=>"✓", "authenticity_token"=>"o8bzaGFcWGaHFFEbgZsfx5bWiHDAIaX3j4xXh3XkTwc=", "article"=>{"title"=>"mmmmm", "text"=>"mmmmm"}, "commit"=>"Create Article"} Rendered text template (0.0ms) Completed 200 OK in 1ms (Views: 0.4ms | ActiveRecord: 0.0ms)

Edit3:

J’ai aussi essayé de cette façon: 

 $.post("/articles", { "article": { "title": "Title1Ar", "text": "text of the article" } }, alert("callback"), "json").error(alert("error handler"));

Ceci dans le WEBrick: 

 Started POST "/articles" for 127.0.0.1 at 2014-09-15 09:19:49 +0100 Processing by ArticlesController#create as JSON Parameters: {"article"=>{"title"=>"firsttitle", "text"=>"text of the article"}} Rendered text template (0.0ms) Completed 200 OK in 1ms (Views: 0.5ms | ActiveRecord: 0.0ms)

mais encore une fois rien ne se passe dans le navigateur. De l’aide?

Je fais un appel comme ça, vous pouvez l’essayer: 

 $("#test-ajax-controller").on("click", function() { request = void 0; request = $.ajax({ url: "/articles/create/?title=acme&text=123 Carrot Street" }); request.done(function(data, textStatus, jqXHR) { console.log(data); }); request.error(function(jqXHR, textStatus, errorThrown) { alert("AJAX Error:" + textStatus); }); });

Et dans votre contrôleur, vous devez répondre en JSON 

 respond_to do |format| format.json { render json: @your_return_object } end

Il semble ok. Pourquoi rien ne se passe dans le navigateur?

Parce que vous n’avez créé aucune fonctionnalité pour gérer la réponse.

Chaque fois que vous envoyez des demandes Ajax, vous recevrez toujours une réponse. Cette réponse est ce que vous devez prendre en compte lors de l’écriture de votre javascript. Je vais détailler une solution immédiate pour vous, puis une solution plus systémique qui vous placera sur un meilleur chemin:

Ajax

Conformément à votre configuration actuelle, vous souhaiterez recevoir les données en utilisant les éléments suivants: 

 #app/assets/javascripts/application.js function ajaxsend() { $.ajax({ url: "/articles", type: "POST", data: { "article": { "title": "acme", "text": "123 Carrot Street" } }, success: function(resp){ alert("Data"); } }); }

La “alerte” dans ce cas est ce qui va créer les effets dont vous avez besoin. Pour que cela fonctionne correctement, vous devrez utiliser votre propre code (je ne sais pas ce que vous essayez d’atteindre).

Il faut également noter que vous devrez lier ce code ajax à un événement de votre JS: 

 #app/assets/javascripts/application.js $(document).on("submit", "form", function() { $.ajax({ url: $(this).attr("action"), type: "POST", data: $(this).serialize(), success: function(resp){ alert("Data"); } }); });

UJS

Avec Rails, nous sums très chanceux d’avoir le pilote Rails UJS , qui fournit une série de fonctionnalités pour nos applications Rails que nous pourrons invoquer de manière implicite (IE sans avoir besoin de continuer à définir des fonctions).

Vous pouvez voir la fonctionnalité Rails UJS Ajax ici

Plus précisément, vous pourrez faire ceci: 

 #app/views/articles/new.html.erb <%= form_for @article, remote: true do |f| %> #app/controllers/articles_controller.rb class ArticlesController < ApplicationController respond_to :js, :json, :html def create @article = Article.new article_params @article.save respond_with @article end private def article_params params.require(:article).permit(:title, :text) end end #app/assets/javascripts/application.js $(document).on("ajax:success", "form", function(status, data, xhr){ alert("DATA RECEIVED"); });