83180
HTML, CSS, javascriptで、VSCode, postmanを使い、あるシステムを作成しています。

以下の内容を実現したいのですがうまくいきません。

  1. ページに入力した内容をそのまま反映させたい
  2. その送信が完了したら送信完了メッセージを出したい

### 1\. ページに入力した内容をそのまま反映させたい

たぶんコードは合っているのですがなせか反映されない状態です。  
（知人がDevToolsでやったら反映されていたらしいです。  
なのでコードは合っているのかなと思います。キャッシュクリアや更新済みです）

### 2\. その送信が完了したら送信完了メッセージを出したい

POSTで送信はできているのでindex.jsの記述が誤っているのだと思うのですが  
調べてもわからなかったのでお力添えのほどよろしくお願いします。

**index.html**

```

    <html>
    <head>
      <link rel="stylesheet" href="index.css">
    </head>
    
    <body>
      <script src="index.js"></script><br><br><br>
    
      <a href="food.html">好きな食べ物</a>
      <a href="profile.html">プロフィール</a>
    
    </body>
    </html>
    
```

**food.html**

```

    <!DOCTYPE html>
    <html lang="ja" dir="ltr">
      <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="index.css">
      </head>
    
      <body>
        <script src="index.js"></script>
      
      <a href="index.html">戻る</a><br><br><br><br>
    
        <form id="formId">
            　<br>
            <input type="text" name="food"><br>
            <input type="button" value="送信" onclick="changeAction()">
          </form>
        
      </body>
    </html>
    
```

**index.css**

```

    html {
        text-align: center;
    }
    
```

**index.js**

```

    function changeAction(){
      let food = "apple";
      
    fetch('https~~~',{
      method: "POST",
      }),
    }).then(x=>console.log(x))
    }
    
    //送信完了
    
    fetch('https://~~~')
    .then(res => {
      // TODO 送信完了メッセージを表示
      
        return response.json();
      })
      .then(data => {
        alert('送信に成功しました。');
      })
      .catch(error => {
        alert("送信に失敗しました。");
                }
            );
    
    
```
CC BY-SA 4.0
2021-10-15T02:55:26.917
83102
2021-10-27T07:07:38.617
2021-10-27T07:07:38.617
48651
48651
question
javascript html css
入力した内容を反映させたい・送信完了メッセージを表示したい
>   2. その送信が完了したら送信完了メッセージを出したい
>

一つの例

```

    function changeAction(){
        const ajaxs = async () => {
            const response = await fetch('piyo.html');
            if (response.ok) {
                const retValue = await response.text();
                return Promise.resolve(retValue);
            } else {
                return Promise.reject('file not found');
            }
        }
    
        ajaxs()
            .then(function (ret){
                console.log(ret);
            })
            .catch(function (errs){
                    console.log(errs);
                }
            );
    
    }
    
    
```

追記、寒かったので動くコードを書いた。（明日、テストphpスクリプトを止めます。）

```

    function sends(){
    
            const ajax_1 = async () => {
            const formData =  new FormData(document.forms.namedItem("fm1"));
    
    // 送信用データを設定
                const options = {
                    method: 'POST',
                    mode: "cors",
                    body: formData,
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                };
    
                delete options.headers['Content-Type'];
    
                const response = await fetch('https://yyz.2-d.jp/res.php', options);
    
                if (response.ok) {
                    const retValue = await response.text();
                    return Promise.resolve(retValue);
                } else {
                    return Promise.reject('file not found');
                }
            }
    
            ajax_1()
                .then(ret=>{
                    alert('send ok!');
                    console.log(ret);
                })
                .catch(errs=>{
                        console.log(errs);
                    }
                );
    　  return false;
        }
```

```

    html {
        text-align: center;
    }
```

```

    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    
    <form name="fm1">
        Post data, please.　<br>
        ＆ DATA returns <br>
        <input type="text" name="food"><br>
        <input type="button" value="送信" onclick="sends()">
    </form>
    </html>
```
CC BY-SA 4.0
2021-10-18T04:52:53.643
83155
2021-10-20T02:03:52.970
2021-10-20T02:03:52.970
22793
22793
83102
answer
最初に Python の wsgiref(Web Server Gateway Interface REFerence implementation)
モジュールを使って、テスト用の簡素な HTTP サーバを作成します(8001番ポートを listen)。

**http_server.py**

```

    from wsgiref.simple_server import make_server
    import json
    
    def server(environ, start_response):
      if environ['REQUEST_METHOD'] == 'POST':
        wsgi_input = environ['wsgi.input']
        content_length = int(environ['CONTENT_LENGTH'])
        data = json.loads(wsgi_input.read(content_length))
    
      status = '200 OK'
      headers = [
        ('Content-Type', 'application/json; charset=utf-8'),
        ('Access-Control-Allow-Origin', '*'),
        ('Access-Control-Allow-Headers', 'Content-Type, Authorization'),
      ]
    
      start_response(status, headers)
      return (
        [json.dumps(data).encode('utf-8')]
          if environ['REQUEST_METHOD'] == 'POST'
          else [b''])
    
    if __name__ == '__main__':
      PORT = 8001
      with make_server('', PORT, server) as httpd:
        print(f'Start simple http server on port {PORT}...')
        httpd.serve_forever()
    
```

`index.js` と `food.html` を以下の様に書き換えます。フォーム(`onsubmit` event と callback
関数)を使う必要性が感じられないので `button` の `onClick` event と callback 関数のみを指定しています。

**index.js**

```

    function changeAction(){
      const food = $('input[name="food"]').val();
      fetch('http://localhost:8001/', {
        method: "POST",
        body: '{"food":"' + food + '"}',
        mode: "cors",
        headers: new Headers({
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ~~~',
        }),
      })
      .then(res => {
        if (!res.ok) {
          throw new Error('fail');
        }
        return res.json();
      })
      .then(data => {
        // 送信完了
        _showAlert('送信に成功しました。');
        console.log(data);
      })
      .catch(error => {
        _showAlert('送信に失敗しました。');
        console.error(error);
      });
    }
    
    function _showAlert(msg) {
      var $alert = $('<div>').prependTo($('#container')).addClass('alert');
      $alert.hide().text(msg).fadeIn(3000, function() {
        $alert.fadeOut(3000, function() {
          $alert.remove();
          $('input[name="food"]').val('');
        });
      });
    }
    
```

**food.html**

```

    <!DOCTYPE html>
    <html lang="ja" dir="ltr">
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="index.css">
      <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
      <script src="index.js"></script>
    </head>
    <body>
      <a href="index.html">戻る</a><br><br><br><br>
      <div id="container"></div>
      <table align="center">
        <tr><td>好きな食べ物　</td></tr>
        <tr><td><input type="text" name="food"></td></tr>
        <tr><td><input type="button" value="送信" onclick="changeAction()"></td></tr>
      </table>
    </body>
    </html>
    
```

**実行結果**  
[![test](https://i.stack.imgur.com/5JOfX.gif)](https://i.stack.imgur.com/5JOfX.gif)
CC BY-SA 4.0
2021-10-19T21:22:03.553
83180
2021-10-19T21:37:49.727
2021-10-19T21:37:49.727
47127
47127
83102
answer