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

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

ただいまの
回答率

90.38%

  • PHP

    25037questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    8557questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1385questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • Monaca

    1156questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • XAMPP

    650questions

    XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

AjaxからPHPへデータを送信

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,597
退会済みユーザー

退会済みユーザー

前提・実現したいこと

monacaとOnsenUIを使って同一ディレクトリから取り出したtextをチェックボックスに入れてチェックした値をサーバーに渡すというプログラムを作っていますが、サーバーに渡す部分で詰まってしまいました。
ソースコードを乗せましたのでおかしなところを指摘していただけないでしょうか。
よろしくおねがいします。
当方、PHP、Ajaxをほとんど触ったことがないためわかりやすい解説をお願いします。

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

XMLHttpRequest.status:200
XMLHttpRequest.responseText:OK
textStatus:textStatus:parsererror → phpの戻り値がjson形式になっていなかったことが原因
errorThrown:SyntaxError:Unexpected token O

errorThrown:OK

ソースコード

<!DOCTYPE HTML>
<html ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min/js"></script>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script>

ons.bootstrap();

ons.ready(function getTxt(event){

    $.ajax("load.txt", {
        async: true,
        cache:false,
        success: function(data, status, jqXHR){

            var data_array = data.split(/\r\n|\r|\n/);
            var len = data_array.length;

            $("output:first").text(data);

                $('#hoge').empty();

                for(var i=0; i<len; i++){
                    $('<label class="checkbox checkbox--list-item" ><input type="checkbox" name="checkbox"value="' + data_array[i] + '"/><div class="checkbox__checkmark checkbox--list-item__checkmark"></div>' + data_array[i] + '</label>').appendTo('#hoge');
                }

        }
    });
});

function chkvalue(){

    //チェックボックスのデータ取得

    var chkVal = [];
    $('[name="checkbox"]:checked').each(function(){
        chkVal.push($(this).val());   
    });

    var data = {'recuest':JSON.stringify(chkVal)};

    $.ajax({
        type:"post",
        url:"/php/sample/send.php",
        data:data,
        crossDomain: true,
        dataType:"json",
        scriptCharset: "utf-8",
        success:function(data){
            alert(data.text)
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            alert("XMLHttpRequest.status:"+XMLHttpRequest.status);
            alert("XMLHttpRequest.responseText:"+XMLHttpRequest.responseText);
            alert("textStatus:"+textStatus);
            alert("errorThrown:"+errorThrown);
        }
    });
}

</script>
</head>
<body>

        <div style="text-align: center" class="check">

            <!-- 取得したテキストの表示 --><br />
            <output></output><br /><br />

            <!-- チェックボックスの表示 -->
            <ons-list>

                <ons-list-header>CheckBox</ons-list-header>

                <ons-list-item modifier="tappable">
                    <li id="hoge"></li>
                </ons-list-item>

            </ons-list>

            <!-- ボタン表示 -->
            <ons-button onclick="chkvalue()">Click to Check</ons-button>
        </div>

        </ons-page>
        </ons-navigator>
        </div>
    </ons-sliding-menu>

</body>
</html>
<?php

header("Content-type: application/json; charset=utf-8");
if(isset($_POST['request'])){
    echo json_encode("OK");
}
else{
    echo 'The parameter of "request" is not found.';
}

?>

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

liplyさんのおっしゃったとおりチェックしていった結果クロスドメイン制約に引っかかっていたためサーバーと通信できていませんでした。
なので新しくサーバーを都合したところXMLHttpRequest.status:200となり、通信することができました。

 ですがtextStatusとerrorThrownがエラーになってしまい、textStatusのほうは自力で解決できたのですが、errorThrownのほうが解決できません。
もう一度お力をお貸ししていただけないでしょうか・・・
よろしくお願いします。
errorThrown:SyntaxError:Unexpected token O

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • dupont_kedama

    2016/03/03 16:41

    ajaxのerror引数で、「XMLHttpRequest」だけalertしてもわからないので、
    XMLHttpRequest.status と XMLHttpRequest.responseText も取り出してみるとよいでしょう。切り分けにつながるかもしれません。

    キャンセル

  • dupont_kedama

    2016/03/04 14:23

    PHPの方ですが、<?php が2回書いてあるのは質問文の誤記ですよね。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/03/04 14:24

    誤記でしたすいません...

    キャンセル

回答 4

+1

クライアント側のコード、送り先がlocalhostになっていますが、localhostはループバックアドレスとという特別なアドレスで、配置された場所からみて、自分自身を参照するものです。

コードの検証の前に、そのアプリがどこに配置されているか確認してください。例えばスマホで動かしているなら、localhostはスマホを意味します。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/03 15:58

    monacaを使っていますのでweb上に保存されていると思います。

    キャンセル

  • 2016/03/03 16:30

    すいません、語がわかり辛かったです。問題はなにが実行しているか、です。

    ・Monacaのスマホアプリ=>アプリがJSを解析して実行=>localhostはスマホ
    ・MonacaIDE=>ブラウザがJSを解析して実行=>localhostはブラウザが実行さてているパソコン

    問題を解決したい場合は、問題の切り分けを行ってください。
    通信できない場合、ロジックの問題の前に、可能性がいくつもあるわけです。

    1. ネットワーク的に見える位置に、お互いがいない(今回まずこれを疑いました)
    2. セキュリティ上許可されていない操作になっている(例えば、仮にブラウザで実行している場合、クロスオリジン制約にひっかかってる可能性があります)
    3. クライアントが送信しているデータがおかしい(サーバが望むデータが届いてるかどうかチェック)
    4. サーバ側が送信しているデータがおかしい(クライアントが望むデータが届いているかチェック)

    各々の可能性について、一つずつ検証する必要があります。それを行った後ですと、
    もっと有用な回答を引き出しやすいと思います。現状デバッグ丸投げの状態ですので。

    キャンセル

checkベストアンサー

0

皆さんが書かれている通り、送信先の指定が間違っている可能性が高いです。
XMLHttpRequest.status:404
が返っているということはWEBサーバーには届いていて、ファイルの指定が間違っている可能性も考えられます。

送信元ページとajaxの送信先が常に同一のサーバーなのであれば、
url:"/php/sample/send.php",
とした方が無難です。
それから上記で書いた通り/php/sample/send.phpで間違っていないかを確認してみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/03 17:26

    教えていただいた通りに直した結果下記のようなアラートが出ました。

    XMLHttpRequest.status:404

    XMLHttpRequest.responseText:<html>
    <head><tittle>404 Not Found</title></head>
    <body bgcolor="white">
    <center><h1>404 Not Found</h1></center>
    <hr><center>nginx</center>
    </body>
    </html>
    <!--a padding to disable MSIE and Chrome friendly error page -->
    <!--a padding to disable MSIE and Chrome friendly error page -->
    <!--a padding to disable MSIE and Chrome friendly error page -->
    <!--a padding to disable MSIE and Chrome friendly error page -->
    <!--a padding to disable MSIE and Chrome friendly error page -->
    <!--a padding to disable MSIE and Chrome friendly error page -->

    textStatus:error

    errorThrown:OK

    キャンセル

  • 2016/03/03 17:30

    他の方の回答にある指摘についても一通り確認し、その結果をそれぞれコメントしてください。お願いします。

    キャンセル

  • 2016/03/04 14:43

    PHPを

    header("Content-type: application/json; charset=utf-8");
    if(isset($_POST['request'])){
    echo json_encode("OK");
    exit();
    }
    else{
    echo json_encode('The parameter of "request" is not found.');
    exit();
    }

    としてみてどうでしょうか。

    キャンセル

0

monacaでアプリを開発しているという認識であっていますか?
スマホのmonacaデバッガーから動作検証しているという認識であっていますか?
上記、認識が合っているのを前提に回答させていただきます。

liplyさんが答えている通り、localhostは自分自身となるので指定が間違っています。
ローカルPCにxamppを構築しているというですが、ローカルPCに外部からアクセスできますか?
※外部からルータを通して、ローカルPCにアクセスできるようにルータ設定などしてありますか?

ローカルのPCにアクセスできるようになっている場合

http://自宅のグローバルIP:port番号/php/sample/send.php


のようなアクセスになると思います。
専門的な事がわからないようでしたら、サーバを借りる事をオススメします。

PHP側はjsでpostで送信しているので$_POSTから値が取得できると思います。
サーバからjsonをresponseする時のヘッダーは

header("Content-Type: application/json; charset=utf-8");

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

dataTypeをjsonではなくhtmlにしたところ成功しました。
ご迷惑をおかけしてすいませんでした!
お手伝いしていただいた皆さんありがとうございました。

<!DOCTYPE HTML>
<html ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min/js"></script>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script>

ons.bootstrap();

ons.ready(function getTxt(event){

    $.ajax("load.txt", {
        async: true,
        cache:false,
        success: function(data, status, jqXHR){

            var data_array = data.split(/\r\n|\r|\n/);
            var len = data_array.length;

            $("output:first").text(data);

                $('#hoge').empty();

                for(var i=0; i<len; i++){
                    $('<label class="checkbox checkbox--list-item" ><input type="checkbox" name="checkbox"value="' + data_array[i] + '"/><div class="checkbox__checkmark checkbox--list-item__checkmark"></div>' + data_array[i] + '</label>').appendTo('#hoge');
                }

        }
    });
});

function chkvalue(){

    //チェックボックスのデータ取得

    var chkVal = [];
    $('[name="checkbox"]:checked').each(function(){
        chkVal.push($(this).val());   
    });
    var c_data = chkVal;

    $.ajax({
        type:"post",
        url:"/*サーバーのURL*/",
        data:{"c_data":[c_data]},
        crossDomain: true,
        dataType:"html",
        scriptCharset: "utf-8",
        success:function(j_data){
            $("#data").text(j_data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            alert("XMLHttpRequest.status:"+XMLHttpRequest.status);
            alert("XMLHttpRequest.responseText:"+XMLHttpRequest.responseText);
            alert("textStatus:"+textStatus);
            alert("errorThrown:"+errorThrown);
        }
    });

}
</script>
</head>
<body>

    <ons-sliding-menu var="app.slidingMenue" side="left" type="overlay" max-slide-distance="200px">

        <div class="menu">
        <ons-page style="background-color: white">
        <ons-list>

            <ons-list-item
                modifier="tappable" class="list__item__line-height"
                onclick="navi1.popPage('index.html', {closeMenu: true})">
                <i class="fa fa-home fa-lg" style="color: #666"></i>
                &nbsp; index
            </ons-list-item>

            <ons-list-item
                modifier="tappable" class="list__item__line-height"
                onclick="navi1.pushPage('page2.html', {closeMenu: true})">
                <i class="fa fa-gear fa-lg" style="color: #666"></i>
                &nbsp; Page 2
            </ons-list-item>

        </ons-list>
        </ons-page>
        </div>

        <div class="main">

        <ons-navigator var="navi1">
        <ons-page>

        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center">CheckBoxes</div>
        </ons-toolbar>

        <div style="text-align: center" class="check">

            <!-- 取得したテキストの表示 --><br />
            <output></output><br /><br />

            <!-- チェックボックスの表示 -->
            <ons-list>

                <ons-list-header>CheckBox</ons-list-header>

                <ons-list-item modifier="tappable">
                    <li id="hoge"></li>
                </ons-list-item>

            </ons-list>

            <!-- ボタン表示 -->
            <ons-button onclick="chkvalue()">Click to Check</ons-button>

            <pre id="data"></pre>
        </div>


        </ons-page>
        </ons-navigator>
        </div>
    </ons-sliding-menu>

</body>
</html>
<?php

header("Content-Type: text/html; charset=utf-8");
if(isset($_POST["c_data"])){
    echo 'OK';
}
else{
    echo 'The parameter of "data" is not found.';
}

?>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • PHP

    25037questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    8557questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1385questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • Monaca

    1156questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • XAMPP

    650questions

    XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。