ホーム>source

次のスクリプトをjqueryベースのajaxからPure javascriptベースのajaxに変換しましたが、機能しません

ここで私たちjqueryベースのスクリプト

<前>ウィズウィズ

ここに変換されたJavaScriptコードがあります

<前>ウィズウィズ

あまり気づいていないので送信に問題があるのではないかと思います。

HTMLを

<前>ウィズウィズ

<前>ウィズウィズ var cart = { 'add': function(product_id, quantity) { $.ajax({ url: 'index.php?route=checkout/cart/add', type: 'post', data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1), dataType: 'json' }); } }
あなたの答え
  • 解決した方法 # 1

    JSでフォームエンコードされたメッセージを送信するには、フォームを送信するか、 FormData を作成する必要があります  オブジェクト。あなたの場合、 FormData を作成します 。

    <前>ウィズウィズ

    今、私は新しい // Set the needed params. let formData = new FormData(); const finalQuantity = typeof(quantity) != 'undefined' ? quantity : 1; formData.append('product_id', product_id); formData.append('quantity', finalQuantity); を使用することをお勧めします   fetch API を使用する代わりに 。したがって、リクエストは次のコードのようになります。

    <前>ウィズウィズ

    私の意見では、構造が似ているため、理解がはるかに簡単であり、jQueryからの変換も簡単です。

    したがって、対応するすべての変更を行うと、メソッドは次のようになります。

    <前>ウィズウィズ

    XMLHttpRequest の場合  許可されていません。ブラウザの互換性があるため、引き続き fetch('index.php?route=checkout/cart/add', { method: 'POST', body: formData, })) .then(response => response.json()) .then(() => { console.log('Success.'); }).catch(error => { console.log(error.message); }).finally(function () { console.log('Something you wanna execute even if you caught an error or if the request was successful.'); }); を使用できます 。あなたのコードはいくつかのマイナーな変更を必要とします。

    <前>ウィズウィズ function addCart(element, product_id, quantity) { // Set the needed params. let formData = new FormData(); const finalQuantity = typeof(quantity) != 'undefined' ? quantity : 1; formData.append('product_id', product_id); formData.append('quantity', finalQuantity); fetch('index.php?route=checkout/cart/add', { method: 'POST', body: formData, })) .then(response => response.json()) .then(() => { console.log('Success.'); }).catch(error => { console.log(error.message); }).finally(function () { console.log('Something you wanna execute even if you caught an error or if the request was successful.'); }); }

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ php - Yii2フレームワークとSumの関係が正しく機能しない