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

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

ただいまの
回答率

90.12%

ajaxで配列やオブジェクトを渡したい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 3,829

move

score 14

以下のようなフォームがあるとして、そのフォームの内容をajaxでPOSTしたい
質問のためチェックボックスの数は減らしています。実際は結構多い

<input type='hidden' name='issueid' value=10>
<input type='checkbox' data-user_id=1 class="user">
<input type='checkbox' data-user_id=2 class="user">
<input type='checkbox' data-user_id=3 class="user">
<input type='checkbox' data-user_id=4 class="user">
<input type='checkbox' data-user_id=5 class="user">
<button id="send">send</button>
$(function(){

    $("#send").click(function(){

    var data;
    // ここから
    $.each($(".user"),function(){
            // $(this).data('user_id') と$(this).prop('checked')
            // の値のペアをdataにセットしていきたい。
    });

    // このあたりまでにdataにissueidの値やチェックボックスの
    // data-user_id $(this).data('user_id')

    $.ajax({
            type: 'POST',
            url: '/posturl',
            data: data,
            dataType: 'json'
        }).done(function( data, status, xhr ){

        });
            return false;
    });

});

POSTの受け取り側(php)で

array(
    'issueid'=>10,
    'users'=>array(
        '1'=>false,  // user_id=>チェックの有無
        '2'=>true,
        '3'=>true,
        '4'=>true,
        '5'=>false
    )
);


hiddenの値と各チェックボックスのuser_idとチェックの有無を上記のような形に整形したい

そうするためにはjavascriptの
// ここから
// このあたりまで
の箇所でどのようなデータ(data)に整形するのがよいでしょうか?
よろしくお願いいたします。

追記

<input type='hidden' name='issueid' value=10>
<?php foreach($this−>users as $user):?>
// $this->chkdusersはcontroller側でセッションん存在するユーザーの事
<input type='checkbox' class="user" data-user_id="<?php echo($user['id']); ?>"<?php if(in_array($user['id'],$this->chkdusers)){echo(' checked');} ?>>
<?php endforeach; ?>
<button id="send">send</button>
// user選択(単発用)
$(".user").change(function(){
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        timeout: 10000,
        data: {'issueid':$("input[name=issueid]").val(),'user_id': $(this).data('user_id'),'checked': $(this).prop('checked')},
        dataType: 'json'
    }).done(function( data, status, xhr ){

    });
});

// 以下がコメントのやりとりで一気にチェック状態を変化させた時の処理

// 全選択
$("#allselect").click(function(){

    // 現在全選択されている場合は全解除
    if($(".user").length == $(".user:checked").length)
    {
        $(".user").prop('checked',false);
    }
    else {
        // 通常は全選択する
        $(".user").prop('checked',true);
    }

    // この時$(".user").change(function()は起こらないなので全選択や全解除の情報、つまり
    // ページ内の全ユーザーのチェックの有無を送らないといけないと思った。

    // この部分を要領良く送るのにどういう書き方が良いのか?という質問でした。
}

// 一括絞込選択
$("#ikkatu").click(function(){
    // コメントのやりとりで男のみ選択するなど特定の条件で一気にチェックボックスの状態を書き換える場合の処理

    // 簡素化のため単純に偶数番目をチェックして奇数番目をチェックはずす処理にはしょってます。
    $(".target:even").prop('checked',true);
    $(".target:odd").prop('checked',false);

    // この時$(".user").change(function()は起こらないなので
    // ページ内の全ユーザーのチェックの有無を送らないといけないと思った。

    // この部分を要領良く送るのにどういう書き方が良いのか?という質問でした。

}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2016/11/19 01:17

    javascript simple object notation (JSON) すでにあるよ

    キャンセル

  • move

    2016/11/19 03:21

    すいません、言葉のチョイスが悪かったです。どのようなJSONを作れば要領よく渡せるでしょうか、とするべきでした。

    キャンセル

  • kei344

    2016/11/19 03:45

    質問内容については解決されているように見受けられます。追加の質問は新たに質問されることをお勧めします。

    キャンセル

  • move

    2016/11/19 04:24

    kei344様、少しでも多くの実装方法学べそうでしたので少し解決済みに時間をずらしておりました。解決済みにさせていただきます。

    キャンセル

回答 3

checkベストアンサー

+3

<input type='hidden' name='issueid' value=10>
<input type='checkbox' name='users' value=1>
<input type='checkbox' name='users' value=2>
<input type='checkbox' name='users' value=3>
<input type='checkbox' name='users' value=4>
<input type='checkbox' name='users' value=5>
<button id="send">send</button>
$(function(){
    $("#send").on('click', function(){
    var data = {};
    data['issueid'] = $('input[name=issueid]').val();
    $('input[name=users]').each(function(k,v){
        if ($(v).prop('checked')) {
            data[$(v).val()] = true;
        } else {
            data[$(v).val()] = false;
        }
    });

    $.ajax({
            type: 'POST',
            url: '/posturl',
            data: data,
            dataType: 'json'
        }).done(function( data, status, xhr ){

        });
            return false;
    });

});


未検証ですが、試してみてはいかがでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/11/18 23:35

    ありがとうございますm(_ _)m少しだけ、コード自分の都合の良いように変えたら、php側で目的としていたデータを取得できました。

    キャンセル

  • 2016/11/19 00:05

    少しでもお役に立てたようなら良かったです。

    キャンセル

  • 2016/11/19 00:53

    実案件ではかなり膨大な量&複雑になるので、もともとバックエンドの人間ですので、あまりjavasctipt得意でなく、この部分どう効率的に渡すか他の方の意見も聞きたくて質問させていただきました。

    別の回答者様のコメントで、もしかしたらロジック自体見直すと劇的に処理が簡素になるかもしれませんので、少し自分なり検討&その返事を待ちたいと思いますので、解決済みにするのは少し置いてからにしたいと思います。それでロジック自体はこのままとなればぜひ採用させていただきたいと思います

    キャンセル

  • 2016/11/21 00:23

    パフォーマンス等検討の上、回答いただいた方法を採用させていただきました、ありがとうございますm(_ _)m

    キャンセル

+2

とりあえずこんな感じでどうでしょう?

<script>
$(function(){
  $('#send').on('click',function(e){
    var f=$(this).parents('form');
    var a={};
    a['issueid']=f.find('input[name=issueid]').val();
    a['users']={};
    f.find('input.user').each(function(){
      a['users'][$(this).data('user_id')]=$(this).prop('checked');
    });
    console.log(JSON.stringify(a));
    e.preventDefault();
  });
});
</script>
<form>
<input type='hidden' name='issueid' value=10>
<input type='checkbox' data-user_id="1" class="user">
<input type='checkbox' data-user_id="2" class="user">
<input type='checkbox' data-user_id="3" class="user">
<input type='checkbox' data-user_id="4" class="user">
<input type='checkbox' data-user_id="5" class="user">
<button id="send">send</button>
</form>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/11/19 00:48

    ありがとうございます、機能する形に近いデータが渡せましたm(_ _)m

    キャンセル

+1

通常はこれだけで、事足りるはずですが…

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="">
            <input type='hidden' name='issueid' value=10>
            <input type="checkbox" name="user[]" value="1" />
            <input type="checkbox" name="user[]" value="2" />
            <input type="checkbox" name="user[]" value="3" />
            <input type="checkbox" name="user[]" value="4" />
            <input type="checkbox" name="user[]" value="5" />
            <button type="button" id="send">send</button>
        </form>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#send').on('click', function () {
                    var data = $("form").serialize();

                    $.ajax({
                        method: 'post'
                        , data: data
                        , url: 'ajax.php'
                        , success: function (res) {
                            console.log(res);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

ajax.php

<?php

var_dump($_POST);

追記

common.php

<?php
$checkboxes = array(
    1 => 'チェック1'
    , 2 => 'チェック1'
    , 3 => 'チェック1'
    , 4 => 'チェック1'
);

index.php

<?php
require_once 'common.php';
?><!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="">
            <input type='hidden' name='issueid' value=10>
            <?php foreach ($checkboxes as $val => $check): ?>
                <input type="checkbox" name="user[]" value="<?= $val; ?>" /><?= $check; ?>
            <?php endforeach; ?>
            <button type="button" id="send">send</button>
        </form>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#send').on('click', function () {
                    var data = $("form").serialize();

                    $.ajax({
                        method: 'post'
                        , data: data
                        , url: 'ajax.php'
                        , success: function (res) {
                            console.log(res);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

ajax.php

<?php

require_once 'common.php';

$post = filter_input_array(INPUT_POST);

$res = [];
foreach ($checkboxes as $val => $check) {
    $res['user'][$val] = in_array($val, $post['user']);
}

var_dump($res);

追記 No2

<?php
ini_set('display_errors', true);
error_reporting(E_ALL);

/**
 * index.php
 */
require 'common.php';

$page = (int) filter_input(INPUT_GET, 'page') * 5;
$sql = sprintf('select * from User limit %d, 5', $page);
$users = Db::select($sql);

$sql_total = 'select * from User';
$total_rows = Db::select($sql_total);
$total = count($total_rows);
?>
<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #response {
                height: 200px;
                overflow: scroll;
                background: #F6F6F6;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <button id='send' type="button">送信</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>
                            <label>
                                <input type="checkbox" id='checkall'>
                                全選択
                            </label>
                        </th>
                        <th>id</th>
                        <th>name</th>
                        <th>email</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($users as $user) : ?>
                        <tr>
                            <td>
                                <?php if (isset($_SESSION['user'][$user['id']]) && $_SESSION['user'][$user['id']]) : ?>
                                    <input type="checkbox" class="user_chk" name='user[]' value="<?= h($user['id']); ?>" checked="checked" />
                                <?php else: ?>
                                    <input type="checkbox" class="user_chk" name='user[]' value="<?= h($user['id']); ?>" />
                                <?php endif; ?>
                            </td>
                            <td><?= h($user['id']); ?></td>
                            <td><?= h($user['name']); ?></td>
                            <td><?= h($user['email']); ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
            <?php echo pagination($total); ?>

            <h3>Ajax Response</h3>
            <div id="response">

            </div>
        </div>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $('.user_chk').on('change', function () {
                var userid = $(this).val();
                var checked = $(this).prop('checked');
                $.ajax({
                    url: 'session.php'
                    , method: 'post'
                    , data: {
                        userid: userid
                        , value: checked
                    }
                    , success: function (response) {
                        var pre = $('<pre>');
                        pre.text(response);
                        $('#response').append(pre);
                    }
                });
            });

            $("#checkall").on('click', function () {
                $('.user_chk')
                        .prop('checked', $("#checkall").prop('checked'))
                        .trigger('change');
            });

            $("#send").on('click', function () {
                $.ajax({
                    url: 'send.php'
                    , method: 'post'
                    , success: function (res) {
                        $('#response').text(res);
                    }
                });
            });
        </script>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/11/19 03:57 編集

    全選択は機能として存在していることは伝えていても、それが問題の本質に関わっているとは読み取れませんよ・・・。ちなみに、「後出し」について言っているのは、「ページング」のこと。「ページング」があることで「セッション」が必要になり、セッションのON/OFFを保持する必要があるから、ON/OFFを全て投げたいというよう要件になっているわけです。
    ページングがない場合なら、単純にチェックされているものだけ送れば済むはずですよね。
    まあ、いいけど。とりあえず 回答に index.php 全体を載せて起きました。

    パラメータで宛先ユーザーを渡すのはCSRF発生の要件になるから、セッションから直接検索する、提示したソースの方が安全でしょうね。

    キャンセル

  • 2016/11/19 04:22

    変更後自身でtriggerを引いてやることで、全チェックボックスをajax送信という事ですね。これであれば単発分の処理のをそのまま使えるので、コーディング面で綺麗です。ただしチェックボックスの個数分ajax通信が発生するので、チェックボックスの配列データを一括で送るか、トリガーを引いて送るか少し検討してみます。目的の事は実現可能となりましたので解決済みにさせていただきます。ありがとうございました。

    キャンセル

  • 2016/11/19 04:25 編集

    その方がいいと思います。サンプルなんで動きが読み取れればいいかと思って手抜きしましたが。

    ?users=1,2,3,4 みたいな形でもいいかと思います。

    キャンセル

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

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

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