ajaxの非同期処理について

Question

<form>
<table class="result">
<tr>
<th>名前</th>
<td><input type="text" id="name"></td>
<th>題名</th>
<td><input type="text"id="sub_name" ></td>
</tr>
<div>
<input  type="button" name="ajax" id="ajax" value="検索">
<script th:src="@{/js/books.js}" id="selectNum"></script>
</table>
</form>   

$(function(){
    // ajax button click
    $('#ajax').on('click',function(){
        $.ajax({
            url:'/books',
            type:'GET',
            data:{
                'name':$('#name').val(),
                'sub_name':$('#sub_name').val()
            }
        })
     // ajaxリクエストが成功した時発動
        .done( (data) => {
            $('.result').html(data);
            console.log(data);
        })
        // ajaxリクエストが失敗した時発動
        .fail( (data) => {
            $('.result').html(data);
            console.log(data);
        })
        // ajaxリクエストが成功・失敗どちらでも発動
        .always( (data) => {

        });
    });
});

package com.example.demo;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class books {

	@RequestMapping(value = "books", method = RequestMethod.GET)
	
	public String booksList(Model model) {

		return "books.html";

	}

	@RequestMapping(value = "/books/search", method = RequestMethod.GET)
	@ResponseBody
	public String search6(@RequestParam Map<String, String> params) {
	
		return ;

	}

}

1,<table class="result"></table>　を付け加えました。

問題　検索ボタンを押すとtableが二重に重なって表示されてしまいます。
tableが二つできてしまいます。これは何が原因なのかがわからなく困っております。。

実現したいこと
画面上のinputに入力された値をその同じinput上に非同期処理させたいです。

Comments

[x_x]

jQuery を使っているのであれば、「jQuery」タグをつけてください。
肝心の result が HTML にないようなので、提示するコードの範囲を広げてください。

[kei344]

https://teratail.com/questions/211453 修正されていないコードなので、最新のコードに書き換えましょう。また、「.result」の要素が提示されていないため、追加も書き換えも起こらないコードになっています。

[yambejp]

ようやく準備ができた感じですね
どういうデータが飛んでくるか、それをどう表示したいのか明記してください

[退会済みユーザー]

有難うございますm(__)m
googleで検索した内容を表示させるような仕組みをつくりたいです。
今はajaxの非同期処理の時点でつまずいております。。

[yambejp]

googleの検索はajaxで受け取れないのでは
ajaxは原則ドメインを超えられない前提で行ってください

[yambejp]

なにかサンプル戻りデータをつくれるような
サーバーサイドのプログラムが実行できる環境にありますか？

[退会済みユーザー]

はい、実行できるサーバーあります。コントローラを追加いたしました
そちらで実行の確認をしたいです

[yambejp]

javaの検証はできないので、ajaxのdoneで最初に戻ってくるconsole.log(data);の値と
2回めに戻ってくる値の両方を質問に追記してください

Answer 1

いきなりtrとか書かれているのもHTMLとして成立していません
テーブルならテーブルとしての書き方があるので守ってください

$('.result').html(data);

class="result"がついたHTML要素がないのでまずそれを作ります
その上でテーブルの結果として表示したいならそれに合わせます
divとかで良ければ構造はもっと簡単に済むでしょう
前回検索したものに行(?)を追加したいのか上書きしたいのかでも
処理が当然異なります。

状況として、

• 要求に対して戻りが確認できない（エラー？）なのか
• 戻ってきたけどそれを表示するやり方がわからないのか

明確にしたほうがよいでしょう

Comments

[退会済みユーザー]

ajaxの処理が走るとなぜかテーブルが２重で表示されてしまい、困っております。

[yambejp]

残念ながら
$('.result').html(data);
ではテーブルは二重になる可能性はありません
もし再現性があるならソースが違いませんか？

[yambejp]

見た感じサーバー側がjavaで戻り値自体がhtmlのテーブルなんですかね？
っとはいえ.resultのhtmlを書き換えているので二重にはなりません
サーバーから戻ってきているテキストを掴んで例示できませんか？

[退会済みユーザー]

そうなんですね。ありがとうございます。ソースはこの上記のままで実行しております。

[退会済みユーザー]

了解いたしました

[yambejp]

ごめんなさい、いま見たところ
<table class="result">となっていますが
テーブルを書き換えているのでしょうか？
テーブルのクラスを消して
<div class="result"></div>
みたいな出力専用の段落を用意しておくのではない？

[退会済みユーザー]

有難うございます！元の位置に表示されるようになりました！！
tableに書いていたため書き換えされているとは思いませんでした。。
勉強になります！m(__)m