AjaxからPHPへデータを送信

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

###発生している問題・エラーメッセージ
XMLHttpRequest.status:200
XMLHttpRequest.responseText:OK
textStatus:textStatus:parsererror → phpの戻り値がjson形式になっていなかったことが原因
errorThrown:SyntaxError:Unexpected token O

errorThrown:OK
###ソースコード

HTML
1<!DOCTYPE HTML>
2<html ng-csp>
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7<script src="components/loader.js"></script>
8<script src="js/winstore-jscompat.js"></script>
9<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
10<link rel="stylesheet" href="components/loader.css">
11<link rel="stylesheet" href="css/style.css">
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min/js"></script>
13<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
14<script>
15
16ons.bootstrap();
17
18ons.ready(function getTxt(event){
19    
20    $.ajax("load.txt", {
21        async: true,
22        cache:false,
23        success: function(data, status, jqXHR){
24            
25            var data_array = data.split(/\r\n|\r|\n/);
26            var len = data_array.length;
27            
28            $("output:first").text(data);
29
30                $('#hoge').empty();
31                
32                for(var i=0; i<len; i++){
33                    $('<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');
34                }
35                
36        }
37    });
38});
39
40function chkvalue(){
41    
42    //チェックボックスのデータ取得
43    
44    var chkVal = [];
45    $('[name="checkbox"]:checked').each(function(){
46        chkVal.push($(this).val());   
47    });
48    
49    var data = {'recuest':JSON.stringify(chkVal)};
50    
51    $.ajax({
52        type:"post",
53        url:"/php/sample/send.php",
54        data:data,
55        crossDomain: true,
56        dataType:"json",
57        scriptCharset: "utf-8",
58        success:function(data){
59            alert(data.text)
60        },
61        error: function(XMLHttpRequest, textStatus, errorThrown){
62            alert("XMLHttpRequest.status:"+XMLHttpRequest.status);
63            alert("XMLHttpRequest.responseText:"+XMLHttpRequest.responseText);
64            alert("textStatus:"+textStatus);
65            alert("errorThrown:"+errorThrown);
66        }
67    });
68}
69
70</script>
71</head>
72<body>
73
74        <div style="text-align: center" class="check">
75            
76            <!-- 取得したテキストの表示 --><br />
77            <output></output><br /><br />
78            
79            <!-- チェックボックスの表示 -->
80            <ons-list>
81        
82                <ons-list-header>CheckBox</ons-list-header>
83        
84                <ons-list-item modifier="tappable">
85                    <li id="hoge"></li>
86                </ons-list-item>
87        
88            </ons-list>
89            
90            <!-- ボタン表示 -->
91            <ons-button onclick="chkvalue()">Click to Check</ons-button>
92        </div>
93        
94        </ons-page>
95        </ons-navigator>
96        </div>
97    </ons-sliding-menu>
98    
99</body>
100</html>

PHP
1<?php
2
3header("Content-type: application/json; charset=utf-8");
4if(isset($_POST['request'])){
5	echo json_encode("OK");
6}
7else{
8	echo 'The parameter of "request" is not found.';
9}
10
11?>

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

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

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

dupont_kedama

2016/03/03 07:41

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

dupont_kedama

2016/03/04 05:23

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

退会済みユーザー

2016/03/04 05:24

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

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

回答4件

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

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

投稿2016/03/03 06:26

liply

総合スコア150

退会済みユーザー

2016/03/03 06:58

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

liply

2016/03/03 07:30

すいません、語がわかり辛かったです。問題はなにが実行しているか、です。・Monacaのスマホアプリ＝＞アプリがJSを解析して実行＝＞localhostはスマホ・MonacaIDE＝＞ブラウザがJSを解析して実行＝＞localhostはブラウザが実行さてているパソコン問題を解決したい場合は、問題の切り分けを行ってください。通信できない場合、ロジックの問題の前に、可能性がいくつもあるわけです。 1. ネットワーク的に見える位置に、お互いがいない（今回まずこれを疑いました） 2. セキュリティ上許可されていない操作になっている（例えば、仮にブラウザで実行している場合、クロスオリジン制約にひっかかってる可能性があります） 3. クライアントが送信しているデータがおかしい（サーバが望むデータが届いてるかどうかチェック） 4. サーバ側が送信しているデータがおかしい（クライアントが望むデータが届いているかチェック）各々の可能性について、一つずつ検証する必要があります。それを行った後ですと、もっと有用な回答を引き出しやすいと思います。現状デバッグ丸投げの状態ですので。

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

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

javascript
1<!DOCTYPE HTML>
2<html ng-csp>
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7<script src="components/loader.js"></script>
8<script src="js/winstore-jscompat.js"></script>
9<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
10<link rel="stylesheet" href="components/loader.css">
11<link rel="stylesheet" href="css/style.css">
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min/js"></script>
13<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
14<script>
15
16ons.bootstrap();
17
18ons.ready(function getTxt(event){
19
20    $.ajax("load.txt", {
21        async: true,
22        cache:false,
23        success: function(data, status, jqXHR){
24
25            var data_array = data.split(/\r\n|\r|\n/);
26            var len = data_array.length;
27
28            $("output:first").text(data);
29
30                $('#hoge').empty();
31                
32                for(var i=0; i<len; i++){
33                    $('<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');
34                }
35
36        }
37    });
38});
39
40function chkvalue(){
41        
42    //チェックボックスのデータ取得
43    
44    var chkVal = [];
45    $('[name="checkbox"]:checked').each(function(){
46        chkVal.push($(this).val());   
47    });
48    var c_data = chkVal;
49
50    $.ajax({
51        type:"post",
52        url:"/*サーバーのURL*/",
53        data:{"c_data":[c_data]},
54        crossDomain: true,
55        dataType:"html",
56        scriptCharset: "utf-8",
57        success:function(j_data){
58            $("#data").text(j_data);
59        },
60        error: function(XMLHttpRequest, textStatus, errorThrown){
61            alert("XMLHttpRequest.status:"+XMLHttpRequest.status);
62            alert("XMLHttpRequest.responseText:"+XMLHttpRequest.responseText);
63            alert("textStatus:"+textStatus);
64            alert("errorThrown:"+errorThrown);
65        }
66    });
67    
68}
69</script>
70</head>
71<body>
72    
73    <ons-sliding-menu var="app.slidingMenue" side="left" type="overlay" max-slide-distance="200px">
74    
75        <div class="menu">
76        <ons-page style="background-color: white">
77        <ons-list>
78
79            <ons-list-item
80                modifier="tappable" class="list__item__line-height"
81                onclick="navi1.popPage('index.html', {closeMenu: true})">
82                <i class="fa fa-home fa-lg" style="color: #666"></i>
83                &nbsp; index
84            </ons-list-item>
85
86            <ons-list-item
87                modifier="tappable" class="list__item__line-height"
88                onclick="navi1.pushPage('page2.html', {closeMenu: true})">
89                <i class="fa fa-gear fa-lg" style="color: #666"></i>
90                &nbsp; Page 2
91            </ons-list-item>
92
93        </ons-list>
94        </ons-page>
95        </div>
96        
97        <div class="main">
98        
99        <ons-navigator var="navi1">
100        <ons-page>
101        
102        <ons-toolbar>
103            <div class="left">
104                <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
105            </div>
106            <div class="center">CheckBoxes</div>
107        </ons-toolbar>
108
109        <div style="text-align: center" class="check">
110            
111            <!-- 取得したテキストの表示 --><br />
112            <output></output><br /><br />
113            
114            <!-- チェックボックスの表示 -->
115            <ons-list>
116        
117                <ons-list-header>CheckBox</ons-list-header>
118        
119                <ons-list-item modifier="tappable">
120                    <li id="hoge"></li>
121                </ons-list-item>
122        
123            </ons-list>
124            
125            <!-- ボタン表示 -->
126            <ons-button onclick="chkvalue()">Click to Check</ons-button>
127        
128            <pre id="data"></pre>
129        </div>
130        
131        
132        </ons-page>
133        </ons-navigator>
134        </div>
135    </ons-sliding-menu>
136    
137</body>
138</html>

php
1<?php
2
3header("Content-Type: text/html; charset=utf-8");
4if(isset($_POST["c_data"])){
5	echo 'OK';
6}
7else{
8	echo 'The parameter of "data" is not found.';
9}
10
11?>

投稿2016/03/10 05:27

退会済みユーザー

総合スコア0

ベストアンサー

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

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

投稿2016/03/03 08:09

dupont_kedama

総合スコア925

退会済みユーザー

2016/03/03 08: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>       textStatus:error errorThrown:OK

dupont_kedama

2016/03/03 08:30

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

dupont_kedama

2016/03/04 05: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(); } としてみてどうでしょうか。

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

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");

投稿2016/03/03 07:52

icham

総合スコア559

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

AjaxからPHPへデータを送信

関連した質問