jQueryのajax値渡し先について

Ajaxで値を同ファイルに送りたいのですがうまくできません。

php
1コード
2test.php
3
4
5<!DOCTYPE html>
6<html lang="ja" dir="ltr">
7  <head>
8    <meta charset="utf-8">
9    <title>TEST</title>
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
11  </head>
12  <body>
13
14    <p id="test">jQuery練習</p>
15    <input type="text" id="name" value="">
16    <input type="button" id="test" value="ボタン">
17
18
19    <p id="result"></p>
20
21    <script type="text/javascript">
22      $(function(){
23
24        $("#test").click(function(){
25          $.ajax({
26            url:'test.php',
27            type:'POST',
28            data:{id:"3"}
29          }).done(function(data){
30            alert(data);
31          });
32          });
33        });
34
35
36
37
38      });
39
40    </script>
41
42<?php echo $_POST['id']; ?>
43
44  </body>
45</html>
46

このコードの時に本来ならば、idの３が表示されるはずなのですができません。
ajaxのurlは、同じファイル内に値を送ることはできないのですか？
できるのであればその方法を教えてください。

kei344

2019/03/02 14:34

質問文にエラー文を追記してください。PHPのエラー文が出ていない場合は出すように設定してください。http://mawatari.jp/archives/how-to-display-php-errors / js: http://eng-entrance.com/javascript-display-error

m.ts10806

2019/03/04 01:20

「ダメでした」「うまくいきませんでした」他人には何も伝わらない表現方法なので、具体的に起きた現象を書いてください。

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

回答2件

PHP
1<?PHP
2$id=filter_input(INPUT_POST,"id");
3if(!is_null($id)){
4  print json_encode(["id"=>$id]);
5  exit;
6}else
7?>
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9<script>
10$(function(){
11  $.ajax({
12  data:{id:"123"},
13  dataType:"json",
14  type:"post",
15  }).done(function(data){
16    console.log(data);
17  });
18});
19</script>

投稿2019/03/04 08:17

yambejp

総合スコア114784

msssss

2019/03/05 12:07

回答ありがとうございます

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

ベストアンサー

同ファイルに送ることはできません。
というか送ることがありませんので別ファイルに送るようにしてください。
入力した文字を表示させるだけならjQueryのみでできます。

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>TEST</title>
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7  </head>
8  <body>
9
10    <p id="test">jQuery練習</p>
11    <input type="text" id="name" value="">
12    <input type="button" id="testBtn" value="ボタン">
13
14    <p id="result"></p>
15
16    <script type="text/javascript">
17
18      $(function()
19      {
20        var btn    = $("#testBtn"),
21            result = $("#result"),
22            input  = $("#name");
23
24        btn.click(function()
25        {
26          result.html(input.val());
27        });
28      });
29
30    </script>
31  </body>
32</html>

[おまけ] 上記コードには問題があります。

インプットに<script type="text/javascript">alert("こんにちは")</script>と入力してみてください。javascriptが実行できてしまいます。

ユーザーの入力を扱うには文字のエスケープも合わせて勉強するのをおすすめします。

[追記] 別ファイルにAjaxで値を渡すサンプル

別ファイルにAjaxでidを渡して、その結果を表示するサンプルを書きました。
練習であればこれで良いと思いますがセキュリティーが不十分です。
セキュリティーについてしっかり学ぶと良いと思います。

test.html

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>TEST</title>
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7  </head>
8  <body>
9
10    <p id="test">jQuery練習</p>
11    <input type="text" id="name" value="">
12    <input type="button" id="testBtn" value="ボタン">
13
14    <p id="result"></p>
15
16    <script type="text/javascript">
17
18      $(function()
19      {
20        var btn = $("#testBtn"),
21            result = $("#result");
22
23        btn.click(function()
24        {
25          $.ajax({
26            url:'getData.php',
27            type:'POST',
28            data:{id:"3"}
29          }).done(function(data)
30          {
31            result.text("User : " + data.name + " (" + data.old + ")");
32          });
33        });
34      });
35
36    </script>
37  </body>
38</html>

getData.php

PHP
1<?
2
3// エラーを画面に出さない ※テスト時はコメントアウトしてください
4ini_set("display_errors", 0);
5ini_set("display_startup_errors", 0);
6
7//値がセットされていなければ終了
8if(!isset($_POST['id']))
9{
10  exit;
11}
12
13$id = (int)$_POST['id'];
14//IDの値が0なら終了
15if($id <= 0)
16{
17  exit;
18}
19
20//例としてIDが3ならIDに紐づいたデータを返す
21if($id == 3)
22{
23  $user = [];
24  $user['name'] = 'てすとくん';
25  $user['old']  = 25;
26
27  header("Content-Type: application/json; charset=utf-8");
28  echo json_encode($user, JSON_UNESCAPED_UNICODE);
29}