ホーム

Ajaxのみでフォームを作って要素をPOSTで送る - Jquery

やりたいこと

ボタンをクリックすると、Jqueryが発火する。

<button id="ajax-button">
$('#ajax-button').click( 

 んで、その中で、フォームを作って、フォームの値を作って、POSTリクエストを飛ばす。

ソース

                                                <button id="ajax-button">go</button>
                                                <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
                                                <script>
                                                    $('#ajax-button').click(
                                                   
                                                    function() {
                                                        var hostUrl= '/completecart';
                                                        var param1 = $("#product_count").attr('value');
                                                        var param2 = $("#product_price").attr('value');
                                                        var product_name = $("#product_name").attr('value');
                                                        var product_image = $("#product_image").attr('value');
                                                        
                                                        alert(param1)
                                                        $.ajax({
                                                            url: hostUrl,
                                                            type:'POST',
                                                            dataType: 'json',
                                                            data : {parameter1 : param1, parameter2 : param2, product_name : product_name, product_image : product_image },
                                                            timeout:3000,
                                                        }).done(function(data) {
                                                        }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
                                                        })
                                                    });
                                                </script>
Pocket
LinkedIn にシェア



新規webサービスの開発の依頼ならoffテク⭐️

低コストで、Reactなどモダン言語での新規webサービス開発を承ります

-ホーム
-, , , ,

Copyright© off , 2020 All Rights Reserved Powered by AFFINGER5.