Ajaxを使わずに遷移

jQueryを使ったコーディングで画面遷移を行いたい時に、Ajaxを使わないで処理することって可能なんでしょうか
また、application/json;とjson_encodeについてなんですが、この2つのコードはAjax通信を行う際に使用するコードで、jsonで受信した値をjson_encodeを使ってjson形式で文字列を返すという処理を行っているという解釈で合ってるのでしょうか

PHP
1//a.php
2<?php
3    header("Content-Type: application/json; charset=UTF-8");//～json;だとAjax通信になってしまうので、ここも変更したい
4
5    if ($_POST['bbs'] == "post") {
6        require ("XXX1.php");//各～.phpへ異なる動作・遷移の処理を行う こちらでは投稿処理
7        $p_obj = new Post();
8        $p_obj -> name = $_POST['name'];
9        $p_obj -> comment = $_POST['comment'];
10        $p_obj -> post();
11    } elseif ($_POST['bbs'] == "update") {
12        require ("XXX2.php");//各～.phpへ異なる動作・遷移の処理を行う こちらでは更新処理
13        $u_obj = new Update();
14        $u_obj -> name = $_POST['name'];
15        $u_obj -> comment = $_POST['comment'];
16        $u_obj -> chk = $_POST['chk'];
17        $u_obj -> update();
18    } elseif ($_POST['bbs'] == "delete") {
19        require ("XXX3.php");//各～.phpへ異なる動作・遷移の処理を行う こちらでは削除処理
20        $d_obj = new Delete();
21        $d_obj -> chk = $_POST['chk'];
22        $d_obj -> delete();
23    }
24
25    require("XXX4.php");//各～.phpへ異なる動作・遷移の処理を行う こちらでは投稿した値の一覧を取得する処理
26    $l_obj = new List_table;
27    $data = $l_obj -> list();
28    echo json_encode($data); //←ここの文字列を返すコードも変更したい
29    exit;
30?>

//b.php
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Script-Type" content="text/javascript">

//下記jQueryの処理とフォームでの処理をa.phpへ送信したい
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script>
            $(function() {
                $('input[name=bbs]').click(function(e) {
                    change($(this).prop('id'));
                });
                    change($('input[name=bbs]:checked').prop('id'));
            });
            function condition() {
                if ($('#r1').prop('checked')) {
                    with($('#name')) {
                        if (val().length >= 10) {
                            alert("ERROR");
                            return false;
                        }
                        if (val() === "") {
                            alert("ERROR");
                            return false;
                        }
                    }
                    with($('#comment')) {
                        if (val().length >= 300) {
                            alert("ERROR");
                            return false;
                        }
                        if (val() === "") {
                            alert("ERROR");
                            return false;
                        }
                    }
                }
                if($('#r2').prop('checked')||$('#r3').prop('checked')) {
                    if ($('[name="chkid[]"]:checked').length == 0) {
                        window.alert("ERROR");
                        return false;
                    }
                }
                return true;
            }
            function change(myid) {
                var sendlist = {
                    "r1":{"text":"投稿",checkflg:true},
                    "r2":{"text":"更新",checkflg:false},
                    "r3":{"text":"削除",checkflg:false},
                };
                $('#send').val(sendlist[myid].text);
                $('[name="chkid[]"]').prop('disabled',sendlist[myid].checkflg);
            }
        </script>
    </head>
    <body>

//フォーム入力と、各ボタン操作を行う
        <form method="post" action="a.php" onsubmit="return condition()">
            <table>
                <tr>
                    <td>
                        名前：<input type="text" name="name" id="name">
                        内容：<textarea name="comment" cols="30" rows="3" id="comment"></textarea>
                        <input type="radio" name="bbs" id="r1" value="post" onChange="change(this)">投稿
                        <input type="radio" name="bbs" id="r2" value="update" onChange="change(this)">更新
                        <input type="radio" name="bbs" id="r3" value="delete" onChange="change(this)">削除
                        <input type="submit" value="投稿" id="send">
                    </td>
                </tr>
            </table>

<?php

            $link = mysqli_connect($host, $user, $pass, $dbname) or die("NG");

            mysqli_select_db($link, "xxx");

            $result = mysqli_query($link, "SELECT * FROM xxx ORDER BY time DESC");

            while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
?>

            <table>
                <input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>">
                <tr>
                    <td>名前：
                        <?php echo $row['name'] ?>
                    </td>
                </tr>
                <tr>
                    <td>内容：
                        <?php echo $row['comment'] ?>
                    </td>
                </tr>
            </table>

<?php
            }
            mysqli_free_result($result);

            mysqli_close($link);
?>

        </form>
    </body>
</html>

think49

2016/09/12 02:38

kei344 さんのコメントを無視して新たに質問を立てるのはいかがなものかと思います。 https://teratail.com/questions/47685

行動規範の内容に同意します

回答1件

ベストアンサー

画面遷移を行いたい時に、Ajaxを使わないで処理することって可能なんでしょうか

form要素でsubmitすれば遷移されます。

application/json;とjson_encodeについてなんですが、
この2つのコードはAjax通信を行う際に使用するコードで、

Ajax通信に限りません。

jsonで受信した値を

「jsonで受信した値」とは限りません。たとえば質問文のコードではJSONで受け取っていません。

json_encodeを使ってjson形式で文字列を返すという処理を行っているという

PHPからブラウザにJSONファイルを送っています。なので認識はほぼ合っていますが、Ajax通信専用ではありません。

with の利用は非推奨です。

【with - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/with

with の利用は非推奨であり、ECMAScript 5 の strict mode では禁止されています。推奨される代替案は、参照したいプロパティを持つオブジェクトを一時変数に代入することです。

投稿2016/09/11 08:18

kei344

総合スコア69407

a-_.

2016/09/11 11:38 編集

ご回答ありがとうございます下記の処理を試してみてはいるんですが、イマイチ整理が出来ないので処理の流れを書くと、form要素のaction属性にリンク先(a.php)を追加してsubmitすると、application/json;通信した際に各文字列を受信し、json_encodeでjson形式で返すというのは成立しない、という事なんでしょうかまた、この処理を実行しようとすると画面の下方に保存のメッセージが表示されるんですが、どうしてなのか解説していただけませんか

kei344

2016/09/11 11:06

> application/json;通信そんなものありません。 > というのは成立しない、という事なんでしょうか成立ってなんですか？書いておられるPHPはJSONファイルを返すものです。ブラウザでJSON形式のファイルが表示できない場合、ダウンロードになります。

a-_.

2016/09/11 11:54

現在調べながらの質問なので、解読が間違っている・質問内容が理解しがたい、とは思いますがご了承いただければと存じます MINEの一種としてapplication/json;という通信手段があるというのは何となく理解はできました改めて整理すると「PHPからブラウザに～jsonファイルを送信し、jQueryの文字列を返す」という今回の解釈で合ってるのでしょうかあとapplication/jsonのapplicationの意味を調べてるんですが、探しても説明がなくてよく分かりません

kei344

2016/09/11 12:03

MIMEタイプは（MINEではありません）通信手段ではなくデータ形式を指定するものです。 > PHPからブラウザに～jsonファイルを送信し、jQueryの文字列を返す jQueryがこの文脈でなんに関係していますか？Ajaxしない通信の話をしているのでは？ > application/jsonのapplicationの意味それが重要なのでは無いと思いますが･･･。 https://www.google.co.jp/search?num=100&safe=off&client=firefox-b&q=mime+type+%E3%81%A8%E3%81%AF

a-_.

2016/09/11 12:41

Ajaxは使わないというのはもちろんなんですが、今回は「PHPの処理+jQueryのアラート等処理」も同時にa.phpに送信すればフォームデータだけでなくjQueryの処理も動作されると考えてるため「jQueryの文字列を返す」と解釈していました因みに最初にご回答いただいた「form要素のaction属性にリンク先(a.php)を追加してsubmit」の方法だとjQueryの処理はされず、フォームデータのみ処理されると解釈しているんですが、お話の感じからするとこの解釈も誤解があるんでしょうか app～は今回のケースだとjQueryで定義した機能を動作させるためにJavaScriptに対応しているjsonでデータ形式を指定してデータを渡しているという事なんでしょうか

kei344

2016/09/11 14:19

> 「PHPの処理+jQueryのアラート等処理」も同時にa.phpに送信すればフォームデータだけでなくjQueryの処理も動作されると考えてるため「jQueryの文字列を返す」と解釈していましたブラウザ上の処理とサーバ側の処理を切り分けて考えるべきです。で、jQueryは関係ない。「jQueryの文字列」とは何ですか？jQueryはJavaScriptで書かれたライブラリの一つです。独自のデータ型を持つわけでは有りません。 > 「form要素のaction属性にリンク先(a.php)を追加してsubmit」の方法だとjQueryの処理はされず、フォームデータのみ処理されると解釈しているロジックの書き方次第です。submit時にブラウザイベントが発生するため、それをjQueryで取得する方法はあります。 > app～は今回のケースだとjQueryで定義した機能を動作させるためにJavaScriptに対応しているjsonでデータ形式を指定してデータを渡しているという事なんでしょうかもう一度書きますが、jQueryは関係ない。「JavaScriptに対応しているjsonで」というのも、誤解があります。JSONはJavaScript専用のデータ形式では決してありません。そして、対応しているかどうかを決めるのはMIMEでなくJavaScriptの実装側です。（昔のブラウザでは専用の関数が無いなど対応していないものも有った）書いておられるPHP（a.php）はJSONファイルを返すものです。それだけのことです。

行動規範の内容に同意します