質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

Ajax で POST 後に変数が空になってしまう

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 6,194

score 76


前提・実現したいこと

Java + JQuery(Ajax) でシングルページアプリを作成中です。

発生している問題・エラーメッセージ


Ajaxでサーバー側にデータをPOST後、taccountid=2 という変数の値が空になってしまいます。

(正常URL)
http://localhost/api/proposal?t_account_id=2

(異常URL)
http://localhost/api/proposal?t_account_id=

ソースコード  js

$('#proposal').on('click', function() {
    
    var username = $(':hidden[name="username"]').val(),
        userid = $(':hidden[name="userid"]').val(),
        taccountid = $(':hidden[name="taccountid"]').val(), //// この時点では正常な 2 を取得している
        page = "proposal",
        urlget = "http://localhost/api/proposal?t_account_id=" + taccountid,
        urlpost = "http://localhost/api/proposal";
    
    $('.content-header, div.row, .col-md-12, .box-info, .box').css( 'display', 'none');
    
    $('.content').hide().load('proposal.html').fadeIn(function() {
        getData(urlget, page);              //// この時点でも正常な 2 が入っている
        $(document).on('submit', '#proposal_form', function(event) {
        event.preventDefault();
            var val1 = $('#proposal_form [name=theme]').val(),
                val2 = $('#proposal_form [name=content]').val(),
                data = 
            {"tAccountId":taccountid, "id":null, "theme":val1, "content":val2, "status":"\<span class=\"label label-warning\"\>\<i class=\"fa fa-envelope\"\>\<\/i\> 未読\<\/span\>"};
        callModal(urlget, urlpost, data, page);  //// この POST後に('#proposal')をクリックするとtaccountidはすでに空になっている。関数は後述
        });
    console.log("taccountid_check1: "+taccountid);
    });
});

ソースコード  callModal.js

function callModal(urlget, urlpost, data, page) {
    
    var color,
        token = $("meta[name='_csrf']").attr("content"),
        header = $("meta[name='_csrf_header']").attr("content");

    switch (page){
        case "proposal":
          color = "#00B3EA";
          break;
    }

    swal({
        title: "送信します。よろしいですか?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: color,
        confirmButtonText: "送信する",
        cancelButtonText: "戻る",
        animation: false,
        closeOnConfirm: false
    },
    function (){
        $.ajax({
            type : 'POST',
            url : urlpost,
            data : JSON.stringify(data),
            contentType: 'application/json',
            dataType : 'JSON',
            scriptCharset : 'utf-8',
            timeout: 10000,
            beforeSend: function(xhr) {
                xhr.setRequestHeader(header, token);
            }
        })
        .done(function(response){
            swal("送信完了しました", "元の画面に戻ります", "success");

            // clear form
            $('input, textarea').val("");
            $("input:checkbox").attr("checked",false);
        $("input:radio").attr("checked",false);
            $("option").attr("selected",false);
            
            // reload page
            if (page !== 'report') {
                $('.content').empty();
                $('.content').load(page + '.html');
                getData(urlget, page);
            }

        })
        .fail(function(response){
            swal("送信失敗しました", "お手数ですが不具合報告よりご連絡ください", "error");
        })
        .always(function(response){
            if (page === 'report') {
                $.ajax({
                    type : 'POST',
                    url : "http://localhost/api/" + page + "/mail",
                    data : JSON.stringify(data),
                    contentType: 'application/json',
                    dataType : 'JSON',
                    scriptCharset : 'utf-8',
                    timeout: 10000,
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader(header, token);
                    }
                })  
            };
        });
    });
}
POST後も taccountid の値が正常に入っていてGETできるのがゴールです。
拙いコードで見苦しいのですが、お知恵をお借りできればと思います。よろしくお願いいたします。

補足情報(言語/FW/ツール等のバージョンなど)

JQuery 2.1.4
Java 1.8
SpringBoot 1.2.1
SweetAlert
MySQL
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

taccountid = $(':hidden[name="taccountid"]').val(), //// この時点では正常な 2 を取得している


           // clear form
            $('input, textarea').val("");
            $("input:checkbox").attr("checked",false);
        $("input:radio").attr("checked",false);
            $("option").attr("selected",false);
            
            // reload page
            if (page !== 'report') {
                $('.content').empty();
                $('.content').load(page + '.html');
                getData(urlget, page);
            }
page がreport じゃないから、フォームがクリアされて、ページのデータを取得しなおす。
taccountid を最初にとる時と、フォームをクリアする時、オブジェクトの取り方が違うような気がするが。
$("input") は、type=text,password,file,hidden,など全て対象ですけど。
何がいいたいかというと、getdata の中で、url を再構築してるんじゃないですかね?
done の getdataにurlgetを指定しないで、url文字列を直書きで指定した場合は、問題ないのか確認されては?
http://localhost/....../.....?taccountid=2&taccountid=

シングルページ構成なので、getdata も ajax ? それとも、iframe ?
単純なミスだといいですね。


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/08 10:27 編集

    ipadcaronさん

    ご回答ありがとうございます。

    >$("input") は、type=text,password,file,hidden,など全て対象ですけど。

    このご指摘でやっと気づくことができました!hiddenから取ったデータをクリアしてしまっていました・・。

    早速、該当のフォームだけをクリアするようにしたらいけました。

    ズバリと回答いただき本当に感謝しております。ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る