[2015/12/01現在まだ解決していません]ajaxで値をphpに送りたいが、受け取れない。

よろしくお願いします。

やりたいことは、ラジオボタンにチェックを入れたらajaxで値をphpに送ることです。

現状、jsファイルが読み込めている事は確認出来ましたが、
ラジオボタンにチェックを入れても値が表示されません。

post.php

php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<link rel="stylesheet" type="text/css" href="css/common.css" />
6	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
7	<script type="text/javascript" src="js/main.js"></script>
8	<title></title>
9</head>
10<body>
11
12<form action="cacth.php" method="post">
13	<input type="radio" name="val1" id="val1" value="hoge1">hoge1
14	<!--<input type="radio" name="val1" id="val2" value="hoge2" onClick="val2">hoge2-->
15</form>
16
17<?php
18if(isset($_POST['val1'])){
19	print $_POST['val1'];
20}else{
21	print "失敗";
22}
23?>
24
25</body>
26</html>

main.js

jQuery
1$("#val1").click(function(){
2	$.ajax({
3	type: "POST",
4	url: "../post.php",
5	data: { val1 : 'a', val2: 'b' },
6	success: function(data) { 
7		alert("bbb");
8	}
9});
10

post.phpとjsフォルダが同階層、
jsフォルダの中にmain.jsが入っています。

反応しない理由は何なのでしょうか？

追記です。
クリックイベント内にアラートを記述してみましたが、反応しませんでした。
ラジオボタンを、普通のボタンにしても反応しませんでした。

onlode内に入れたら、successの処理は反応しました。
しかし、値を受け取れていません。

---さらに追記---
success内のアラートをalert(data)にしたところ、post.phpのhtmlコードが全部アラートで表示されました。
そしてその中には、
画像のような部分がありました。
どういうことなのでしょうか？

jQuery
1$(function(){
2	//alert("onlode");
3	$("#val1").click(function(){
4		//alert("aaa");
5		
6		$.ajax({
7		type: "POST",
8		url: "http://localhost:1024/test/Ajax/post.php",
9		data: { 'val' : 'a'},
10		success: function(data) { 
11			alert("bbb");
12		}
13		});
14	});
15});

php
1<?php
2if(isset($_POST['val'])){
3	$val = $_POST['val'];
4	print $val;
5}else{
6	print "失敗";
7}
8?>
9<!DOCTYPE html>
10<html lang="ja">
11<head>
12	<meta charset="utf-8">
13	<link rel="stylesheet" type="text/css" href="css/common.css" />
14	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
15	<script type="text/javascript" src="js/main.js"></script>
16	<title></title>
17</head>
18<body>
19
20	<form action="" method="post">
21		<input type="radio" name="val1" id="val1" value="hoge1">hoge1
22		<!--<input type="radio" name="val1" id="val2" value="hoge2" onClick="val2">hoge2-->
23	</form>
24</body>
25</html>
26

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

回答3件

ベストアンサー

inputタグ内「onClick」はいらないですよ。多分そこがエラーになるので動作していないようですね（書き方間違ってる）。しかも、changeイベントの方がよいかもしれません。
あとこれは、Ajaxは必要なく、

javascript
1$(function() {
2    $("#val1").on("change", function() {
3        this.form.submit();
4    });
5});

で事足りると思います。

JavaScript コード修正：　$(function() {　}); を追加

さらに追記

$.ajax()を使った非同期通信ではサーバからの応答は、success内のdataに入ります。したがって、ページの更新は発生しないので、画面に結果を表示するには、その後の処理を記述しなければなりません。
つまり、
0.AjaxでサーバへPOST（post.php val="a"）、応答待ち受け
0.サーバ側でPOST受け取りーphpで処理（<?php ~ ?>の部分）した後、送信
0.応答あり、コールバック処理success : function(data) {}。（この「data」にサーバから送信されたものが格納されている）
0.ここで、コールバック関数success : function(data)内でalert(data)とすることで、アラート内に質問者様追記分の画像にあるものが表示された。
ということではないでしょうか。
老婆心ながら、自分自身をajaxで要求するような混乱を招きやすい実装になっていますので、もう少しシンプルな実装を再考することをお勧めします。

投稿2015/11/29 13:55

編集2015/12/01 13:04

blackonyx

総合スコア354

退会済みユーザー

2015/11/29 14:12

回答有り難うございます。 this.form.submit()ははリロードするとの事なのですが、これはページに更新がかかるという意味なのでしょうか。非同期で行いたかったのでAjaxを使用しようと思っていました。 inputタグ内のonClickを消して、jsファイルに上記のコードを書きましたが動きませんでした。成功すれば"hoge1"が表示されるということで間違いないですか？

blackonyx

2015/11/29 14:30 編集

失礼しました。動かなかった理由は、スクリプト実行時にはまだ読み込みが完了していなくて、$("#val1")がうまく取得されていないからです。上記javascriptのコードを以下のように修正してください $(function() { $("#val1").on("change", function() { this.form.submit(); }); }); これは、ドキュメントの読み込みが完了した時点でスクリプトを処理する記述です。

退会済みユーザー

2015/11/29 14:43

確かに動きました。ありがとうございます。

blackonyx

2015/12/01 13:06

お疲れ様です。「さらに追記」に対する追加をしてみました。

退会済みユーザー

2015/12/06 09:21

追記ありがとうございます。 Ajaxの仕組みがよく分かってないので、少し力を入れて勉強してみようと思います。

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