httpsへ値付きでPOST送信した際、レスポンス内に送信した値が入っていない

[質問内容]
flutterでpost通信にて特定のphpへ値を送り、レスポンスを貰うも
POST通信で送った値が画面に表示されない現象について
原因と解決方法を知りたい。

観点
・jsonの作り方に問題はないか。
・POST送信方法に問題はないか。

[経緯]
現在、あるhtmlページの機能のandroid/iOSアプリ化の仕事を請け負っています。
機能は、画面にて入力欄で電話番号を入力してボタンを押すと画面遷移し、
入力した文字を画面表示する簡易なものです。POST通信で文字列を送信しています。
以下のサイトです。
https://gow.jp/

android/ios両アプリを同時に開発できる言語として、flutter +dartで開発しています。
(今のところ別の言語に変更する予定はありません。)

私のアプリでは、入力した文字列を'B3'に設定し、jsonに変換した後にpost通信で送っています。
実際にpostしている所は以下です。

  Future<Album> createAlbum(String number) async {
    var url ='https://gow.jp/search/search.php';
    Map data = {
      "B3": number
    };
    var body = json.encode(data);

    final http.Response response = await http.post(
      url,
        headers: <String, String>{
          'Content-Type': 'application/json; charset=utf-8',
        },
      body: body
    );

ところが、実際に送ってみるとレスポンスには文字が入っていません。
("<h1>POSTされたB3= </h1>"の"="より後ろに入る。)
(ログ)

05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter: ========================= 
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:  <!DOCTYPE html>
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:  <html lang="jp" dir="ltr">
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:    <head>
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:      <meta charset="utf-8">
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:          <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:      <title></title>
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:      <style>
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:        body{
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:          text-align: center;
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:          padding: 50px;
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:          background-color: pink;
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:        }
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:      </style>
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:    </head>
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:    <body>
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:      <h1>POSTされたB3=  </h1>
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:    </body>
05-16 13:11:16.155 7594-7622/com.gow.jp.flutter_gowjp I/flutter:  </html>

POST送信した値をレスポンスとして受け取る方法を知りたいです。
よろしくお願いいたします。

[参考にしたURL]
https://flutter.dev/docs/cookbook/networking/send-data

main.dart

flutter
1import 'package:flutter/material.dart';
2import 'header.dart';
3import 'dart:convert';
4import 'package:http/http.dart' as http;
5import 'package:fluttertoast/fluttertoast.dart';
6
7import 'package:camera/camera.dart';
8import 'package:path_provider/path_provider.dart';
9
10import 'dart:async';
11import 'dart:io';
12
13void main() {
14  runApp(MyApp());
15}
16
17class MyApp extends StatelessWidget {
18  // This widget is the root of your application.
19  @override
20  Widget build(BuildContext context) {
21    return MaterialApp(
22      debugShowCheckedModeBanner: false,
23      home: MyHomePage(
24      ), // becomes the route named '/'
25      routes: <String, WidgetBuilder> {
26        '/subPage': (BuildContext context) => new SubPage(),
27      },
28    );
29  }
30
31}
32
33class _MyHomePageState extends State<MyHomePage> {
34  var _mPhoneNumberController = TextEditingController();
35
36  // POST通信をする
37  Future<Album> createAlbum(String number) async {
38    var url ='https://gow.jp/search/search.php';
39    Map data = {
40      "B3": number
41    };
42    var body = json.encode(data);
43
44    final http.Response response = await http.post(
45      url,
46      headers: <String, String>{
47          'Content-Type': 'application/json; charset=utf-8',
48      },
49      body: body
50    );
51
52    int statusCode = response.statusCode;
53    String responseBody = response.body;
54
55    debugPrint('========================= ${responseBody}');
56  }
57
58  // POST要求をする
59  void _postRequest() async {
60    createAlbum(_mPhoneNumberController.text);
61  }
62
63  @override
64  Widget build(BuildContext context) {
65    return Scaffold(
66      appBar: Header(
67      ),
68      body: Center(
69
70      child: SingleChildScrollView(
71        child: Column(
72          mainAxisAlignment: MainAxisAlignment.center,
73
74            Padding(
75                padding: const EdgeInsets.all(16.0),
76                child: TextField(
77                  controller: _mPhoneNumberController,
78
79                  decoration: new InputDecoration(
80                    //Focusしていないとき
81                    enabledBorder: new OutlineInputBorder(
82                      borderRadius: new BorderRadius.circular(25.0),
83                      borderSide: BorderSide(
84                        color: Colors.blue,
85                      ),
86                    ),
87                    //Focusしているとき
88                    focusedBorder: new OutlineInputBorder(
89                      borderRadius: new BorderRadius.circular(25.0),
90                      borderSide: BorderSide(
91                        color: Colors.blue,
92                      ),
93                    ),
94                  ),
95                )
96            ),
97
98            new SizedBox(
99              width: 200.0,
100              height: 50.0,
101              child: new RaisedButton(
102                color: Colors.lightBlue,
103                onPressed: _postRequest_2,
104                highlightElevation: 16.0,
105                highlightColor: Colors.yellow,
106                onHighlightChanged: (value) {},
107              ),
108            ),
109
110            Container(
111              padding: EdgeInsets.all(8.0),
112              child: Text(_text),
113            ),
114
115            new Theme(
116                data: new ThemeData(
117                  primarySwatch: Colors.deepPurple,
118                  brightness: Brightness.light,
119                  buttonColor: Colors.deepPurple[500],
120                  splashColor: Colors.white24,
121                  splashFactory: InkRipple.splashFactory,
122                  buttonTheme: new ButtonThemeData(
123                    textTheme: ButtonTextTheme.primary,
124                  ),
125                ),
126
127                child: OutlineButton.icon(
128                    onPressed: () {
129                      Navigator.of(context).pushNamed("/subPage");
130                    },
131                    icon: const Icon(Icons.photo_camera, size: 18.0),
132                    label: const Text('カメラ機能'),
133                ),
134            )
135
136          ],
137        ),
138      ),
139      ),
140    );
141  }
142}

pubspec.yaml

flutter
1name: flutter_gowjp
2description: A new Flutter application.
3
4publish_to: 'none' # Remove this line if you wish to publish to pub.dev
5
6version: 1.0.0+1
7
8environment:
9  sdk: ">=2.7.0 <3.0.0"
10
11dependencies:
12  flutter:
13    sdk: flutter
14
15  cupertino_icons: ^0.1.3
16  http: ^0.12.1
17  fluttertoast: ^4.0.0
18  camera:
19  path_provider:
20
21dev_dependencies:
22  flutter_test:
23    sdk: flutter
24
25flutter:
26  uses-material-design: true
27
28  assets:
29    - images/icon_logo.png

hoshi-takanori

2020/05/16 06:17

普通の HTML フォームに値を送りたいなら、JSON ではなく application/x-www-form-urlencoded で送るべきでは。

rick

2020/05/18 12:13 編集

回答をいただきありがとうございます。 headerの"Contents-type”を"application/x-www-form-urlencoded"にして送ってみたところ、レスポンス内に送信した値が入っていました。ありがとうございます。

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

回答1件

自己解決

headersのContents-typeの送信方法がJSONとなっていたため
x-www-form-urlencodedへ変更したところ、受信したレスポンス内に送信した値が入った。

(変更箇所)

    Map<String, dynamic> body = {
      'B3': number
    };

        headers: {
        "Accept": "application/json",
          "Content-Type": "application/x-www-form-urlencoded"
        },

投稿2020/05/18 12:16

rick

総合スコア18