J'ai un formulaire dans Laravel où les utilisateurs peuvent acheter des produits. J'essaie d'y parvenir de manière dynamique sans actualisation de la page. Je suis en mesure d'appeler la fonction AJAX, mais elle ne publie pas les données sur le contrôleur et j'ai besoin d'aide. Tout dans le contrôleur fonctionne parfaitement, les données ne lui sont tout simplement pas envoyées.
Voici le formulaire HTML
public function buyProduct($university_code, $product_id){
$player = Player::where('user_id', Auth::user()->id)->first();
$product = Product::where('id', $product_id)->first();
$totalPrice = $product->quantity_available * $product->price;
Voici ma fonction AJAX
$(document).ready(function(){
$('form.buy-product-form').on('submit', (function (e) {
e.preventDefault();
var product_id = $(this).closest("form").attr("id");
$.ajax({
url: $(this).closest("form").attr('action'),
type: 'POST',
data: {'id': product_id},
dataType: 'JSON',
success: function () {
window.alert(url);
}
});
}));
});
Voici les premières lignes du contrôleur
<form class="buy-product-form" id="{{$product->id}}" action="/UoE/buy-product/{{$product->id}}" method="POST">
{{csrf_field()}}
<button class="pull-right btn btn-primary">BUY NOW</button>
</form>
4 Réponses :
Il semble que vous ne puissiez pas envoyer le formulaire, car votre bouton n'est pas un bouton d'envoi.
Oui, ça l'est. Les éléments button sont type = "submit" par défaut.
* va vérifier que
Voilà: developer.mozilla.org/ fr-FR / docs / Web / HTML / Element /…
Vous n'avez pas d'objet de requête passé à votre contrôleur, mais vous avez déclaré qu'il prend deux paramètres.
Dans l'itinéraire, vous ne spécifiez qu'un seul paramètre ( $ product-> id ).
Voici à quoi devrait ressembler la méthode du contrôleur, d'après mon estimation: (édité)
$(document).ready(function(){
$('form.buy-product-form').on('submit', (function (e) {
e.preventDefault();
var product_id = $(this).closest("form").attr("id");
//doesn't matter which csrf, they're all the same
var csrf=document.querySelector("input[name='_token']").getAttribute('value');
$.ajax({
url: `/UoE/buy-product',
type: 'POST',
data: {
'id': product_id,
'_token':csrf //pass CSRF
},
dataType: 'JSON',
success: function () {
window.alert(url);
}
});
}));
});
Accédez à l'objet Request $ request ou request () code > aide pour accéder aux données publiées sur votre contrôleur.
l'url du message: url: $ (this) .closest ("form"). attr ('action') déjà se traduit par / UoE / buy-product / {{$ product-> id}} , donc il y a déjà le product-> id / product_id code > là-bas.
Ma suggestion est de changer votre itinéraire en un itinéraire plus post-like / UoE / buy-product et de transmettre les données (product_id et le jeton csrf)
public function buyProduct(Request $request){
$product_id=$request->id; //could also be $product_id=$request()->id;
}
Tout ce que j'ai besoin d'envoyer est le product_id, le contrôleur gère alors tout pour moi. Donc, si le product_id est déjà passé dans l'action URL, dois-je toujours utiliser un objet Request, et si oui, que contient-il?
Puisque vous faites une requête POST, je suppose que vous allez «publier» des données sur le serveur. Par exemple, récupérez les valeurs des champs du formulaire .buy-product-form et placez-les dans le corps de la requête data: {} . Étant donné que vous n'avez besoin que de product_id, il n'est pas nécessaire d'utiliser l'objet request. (Je suggérerais cependant d'utiliser un Route :: post ('/ UoE / buy-product')) puis de mettre le product_id dans data: {'id': product_id} . Ensuite, vous accéderiez à la fonction (Request $ request) {$ product_id = $ request-> id; } ) - mais ce n'est que mon avis! de la manière qui vous convient haha
D'accord, merci beaucoup, je l'ai fait fonctionner maintenant. J'essaie maintenant de faire ce que vous avez dit, je veux supprimer le Product_id de l'URL et l'envoyer uniquement au contrôleur via la fonction AJAX. Mais cela ne fonctionnera que si je le mets dans l'URL. Je veux juste m'assurer qu'il ne sera pas envoyé deux fois si vous comprenez ce que je dis.
Bienvenu ser. J'ai modifié ma réponse ci-dessus pour être plus propre, peut-être que cela aidera? Bonne chance
Je comprends vraiment ce que vous essayez de me faire faire. Mais mon IDE dit que / UoE / buy-product est un fichier ou un répertoire non résolu et que le lien ne fonctionne pas. Même si je l'ai changé dans mon fichier routes.php
L'action de votre contrôleur attend 2 arguments buyProduct ($ university_code, $ product_id) , mais dans l'action de formulaire, vous ne transmettez que l'ID de produit.
l'argument $ university_code est redondant et n'est pas réellement utilisé dans le contrôleur. Je vais le supprimer.
Je viens de traverser la migraine du POST via AJAX dans Laravel. J'avais un code similaire au vôtre et cela ne fonctionnait pas. Certaines des modifications que j'ai apportées: la balise
n'a eu aucune action.
$(document).ready(function()
{
$(".submit-button").click(function(e){
form_data = $("form").serialize()
$.ajax({
url: "/contact",
type: "POST",
data: form_data,
success: function(data)
{
if ($.isEmptyObject(data.error))
{
handleSuccess(data.success);
}
else
{
handleError(data.error);
}
}
});
});
});
tag:
<button class="btn btn-primary submit-button" type="button">Submit</button>
Appel AJAX:
<form id="contact-form" class="main-form">
obtenez-vous une sortie dans la console ou la barre de débogage?
Envoyez-vous un jeton csrf dans vos fichiers ajax (dans la méta du site par exemple)? le {{csrf_field ()}} dans votre formulaire n'est pas dans votre message ajax sur votre contrôleur voir: laravel.com/docs/5.8/csrf#csrf-x-csrf-token
@jtwes Je viens d'ajouter la balise meta et la fonction ajaxsetup maintenant aussi. Malheureusement, cela ne fonctionne toujours pas.
hm. Vous devriez au moins voir quelque chose ou obtenir une erreur. add error: function (response) {console.log (response)} et, en cas de succès, affiche également la réponse à la console.
J'ai eu hier une erreur de jeton Laravel verify CSRF, mais je ne me souviens pas de la cause de cela, car ma fonction ajax ne contenait même pas l'URL ou quoi que ce soit.
De plus, je pense que
$ ('form.buy-product-form'). On ('submit', (function (e) {devrait être un événement de clic, pas soumettre.