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

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

新規登録して質問してみよう
ただいま回答率
87.20%
HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

受付中

ajax通信時に「Uncaught TypeError: Cannot read property 'toLowerCase' of undefined'」というエラーが発生し通信に失敗する

homareendo
homareendo

総合スコア0

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0回答

0評価

0クリップ

9閲覧

投稿2021/05/22 08:37

■解決したいこと
ajax通信時に「Uncaught TypeError: Cannot read property 'toLowerCase' of undefined'」というエラーが発生し通信に失敗する

■行った手順
・(html)フォームの作成
・(js)送信ボタンに対してclickイベントを設置。イベント内でフォームの値をパラメータとして格納しajax通信のparamで設定している

(test.html)

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- jquery UI --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> <!-- bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css"> </head> <body> <h3 class="bg-info text-white">新規登録ページ</h3> <div> <form> <div class="form-group col-9"> <label>社名</label> <select class="form-control" id="corporateNm"> <option>A社</option> <option>B社</option> <option>C社</option> </select> </div> <div class="form-group col-9"> <label>費用</label> <input type="text" class="form-control" id="cost" th:placeholder="費用を入力してください"> </div> </form> </div> <div class="modal-footer fixed-bottom"> <button class="btn btn-info ml-3" id="registerBtn">登録</button> <button type="button" class="btn btn-secondary closeDialog text-nowrap" id="buttonClose" data-dismiss="modal" data-target="rgsDialog">閉じる</button> </div> <!-- jquery,jquery UI --> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- bootstrap --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script> <!-- 画面固有のjs --> <script type="text/javascript" th:src="@{/js/test/register.js}"></script> <!-- 画面共通のjs --> <script type="text/javascript" th:src="@{/js/common/com.js}"></script> <script type="text/javascript" th:src="@{/js/common/testDialog.js}"></script> </body> </html>

(register.js)

$(function(){ // **************************************************************************************************************** // 変数宣言 // **************************************************************************************************************** const $corporateNm = $("#corporateNm"); const $cost = $("#cost"); const $registerBtn = $("#registerBtn"); // **************************************************************************************************************** // イベント処理 // **************************************************************************************************************** $registerBtn.on("click", function(){ // formの入力値をパラメータとしてセット let param = { corporateNm : $corporateNm.val(), cost : $cost.val() } $.ajax({ type: 'post', url : 'http://localhost:8080/test/register', data: param }).done(function(data) { if(data.result == 'SUCCESS') { com.dialog.info("登録に成功しました。"); } else { com.dialog.info("登録に失敗しました。"); } }); return false; }); })

(TestRegisterRestController.java)

package com.example.demo.web.test.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.validation.BindingResult; import org.springframework.validation.annotation.Validated; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import com.example.demo.web.common.CommonResultDataset; import com.example.demo.web.test.form.TestRegisterForm; import com.example.demo.web.test.service.TestRegisterService; @RequestMapping(value = "/test") @RestController public class TestRegisterRestController { @Autowired private TestRegisterService service; @RequestMapping(value = "/register") public CommonResultDataset register(@Validated @ModelAttribute TestRegisterForm form, BindingResult result){ CommonResultDataset dataset = new CommonResultDataset(); // バリデーションチェックの結果で分岐 if (result.hasErrors()) { // エラー発生時。エラーメッセージをdatasetに格納 result.getAllErrors().stream().forEach(error -> {dataset.addMessage(error.getDefaultMessage());}); } return service.register(form); } }

※cssファイルはなし

■試したこと
1 ajax通信の記述にミスあり?
→jqueryの日本語リファレンスを確認。記述にミスは見当たらず
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

2 「Uncaught TypeError: Cannot read property 'toLowerCase' of undefined'」とは何かを調べ原因を探る
→「Cannot read property 'toLowerCase' of undefined'」←こちらはtoLowerCaseメソッド呼び出し時に起こるエラーで、
メソッドの対象要素のプロパティが見当たらない場合に発生するとのこと。
開発ツールで今回のajax通信で使用している以下2つの値を確認するが未定義のものは見当たらなかった。
・$registerBtn
・param

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

int32_t
int32_t

2021/05/23 01:12

ブラウザの開発者ツールで、エラー表示に加えて「どこでエラーが出たか」が書いていないでしょうか。register\.js に toLowerCase がないのですから、register\.js 以外でエラーが出ているはずです。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。