ajax - Json을 이용한 select태그를 사용하여 일부검색 (2022-10-24)

2022. 10. 24. 22:49ㆍ3층 1구역 - 개발의 장/ajax통신

1. 서론

이번엔 select태그를 사용하여 검색하고자 하는 카테고리를 선택하고

일부 검색을 해보도록 하자.

 

2. 본론

이번 예제는 ex3번과 같이 보면 좋을 듯 하다. 둘이 비슷한 면이 있으니까?

왜냐하면 카테고리를 선택하여 그 value값을 서버에 보내야 하고, 입력칸에 적어주는 값도 서버에 보내야 하니

두개의 데이터를 한번에 보내야 하기 때문이다.

 

코드를 보도록 하자.

 

ex7.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex7</title>
<script type="text/javascript">
    var req
    function send() {
        req = new XMLHttpRequest();
        req.onreadystatechange = changeText
        req.open('post', "ex7")
        var s = document.getElementById("sel").value
        var i = document.getElementById("inputData").value
        var reqData = {sel:s, inputData:i}
        reqData = JSON.stringify(reqData)
        req.setRequestHeader('Content-Type', "application/json; charset=UTF-8")
        req.send(reqData)
    }
    
    function changeText() {
        if(req.readyState == 4 && req.status == 200){
            var tbody = document.getElementById("tbody")
            
                var printData = ''
                /* if(req.responseText == ''){
                    tbody.innerHTML = printData
                    return
                } */
            
            var resData = JSON.parse(req.responseText)
            for(i = 0; i < resData.cd.length; i++){
            printData += "<tr><td>"+resData.cd[i].title+"</td>"
            printData += "<td>"+resData.cd[i].artist+"</td>"
            printData += "<td>"+resData.cd[i].price+"</td></tr>"
            }
            tbody.innerHTML = printData
        }
    }
</script>
</head>
<body onload="send()">
    <select id="sel">
        <option value="title">제목</option>
        <option value="artist">아티스트</option>
        <option value="price">가격</option>
    </select>
    <input type="text" id="inputData" onkeyup="send()">
    <table border="1">
        <thead>
        <tr>
            <th>title</th>
            <th>artist</th>
            <th>price</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
</body>
</html>
cs

 

ajaxMapper.xml

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 
<mapper namespace="com.care.ajax.AjaxRepository">
 
    <insert id="insert" parameterType="com.care.ajax.AjaxDTO">
        INSERT INTO ajax VALUES(#{title},#{artist},#{price})
    </insert>
    
    <select id="all" resultType="com.care.ajax.AjaxDTO">
        SELECT * FROM ajax
    </select>
    
    <select id="title" resultType="com.care.ajax.AjaxDTO">
        SELECT * FROM ajax WHERE title LIKE '%'||#{title}||'%'
    </select>
    
    <select id="select" resultType="com.care.ajax.AjaxDTO">
    SELECT * FROM ajax
    <where>
        <if test="sel.equals('title')">
        title like '%'||#{inputData}||'%'
        </if>
        <if test="sel.equals('artist')">
        artist like '%'||#{inputData}||'%'
        </if>
        <if test="sel.equals('price')">
         price like '%'||#{inputData}||'%'
        </if>
    </where>
    </select>
    
 
</mapper>
cs

select태그가 한개 추가 되었다. 동적sql문이다 라고 하기는 하는데....

mybatis에서 안내해준 코드는 이렇게 쓰라는 것이였으니 개발자 말 들어야지...

 

AjaxController.java

 

1
2
3
4
5
6
7
8
9
10
11
12
13
//    ex7 Mapping 시작====================================================
    @GetMapping("ex7")
    public String ex7Get() {
        return "ajax/ex7";
    }
    
    @ResponseBody
    @PostMapping(value = "ex7", produces = "application/json; charset=UTF-8")
    public String ex7Post(@RequestBody(required = false) HashMap<String, String> map) {
        
        return service.select(map);
    }
//    ex7 Mapping 도착====================================================
cs

 

AjaxRepository.java interface클래스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.care.ajax;
 
import java.util.ArrayList;
import java.util.HashMap;
 
public interface AjaxRepository {
    int insert(AjaxDTO dto);
    
    ArrayList<AjaxDTO> all();
    
    ArrayList<AjaxDTO> title(String title);
    
    ArrayList<AjaxDTO> select(HashMap<String, String> map);
}
 
cs

 

AjaxService.java

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
package com.care.ajax;
 
 
import java.util.ArrayList;
import java.util.HashMap;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
@Service
public class AjaxService {
    @Autowired private AjaxRepository repo;
 
    public String fromJson(ArrayList<AjaxDTO> list) {
         String data = "{\"cd\" : ["; 
          for(AjaxDTO tmp : list) { 
              data += "{ \"title\" : \"" + tmp.getTitle() + "\",";
                data +=     " \"artist\" : \"" + tmp.getArtist() + "\",";
                data += " \"price\" : \"" + tmp.getPrice() +"\" },";
          }
          
          data = data.substring(0, data.length()-1); 
          data += "]}";
          
          return data; 
          }
    
    public String select(HashMap<String, String> map) {
        ArrayList<AjaxDTO> list = repo.select(map);
        if(list.isEmpty() == true) {
            return "";
        }
        return fromJson(list);
    }
    
}
cs

 

결과를 보면??

 

 

이전 예제와 같이 body태그에 onload로 send()를 주었기 때문에 웹페이지가 열리면 모든 리스트가 나오고?

해당 카테고리에는 제목외에 아티스트, 가격 카테고리가 있다.

 

카테고리를 제목으로 선택하고 알파벳 'M'을 쳐보도록 하자.

 

그러면 제목에 알파벳 'M'이 들어간 모든 제목이 나온다.

 

아티스트로 하고 알파벳 'M'을 쳐보도록 하자.

아티스트 중에 알파벳 'M'이 없기 때문에 데이터가 전환되지 않았다.

그러면 'B'는 있을까?

 

알파벳 'B' 가 포함되는 모든 아티스트를 가져왔다.

 

그럼 이제 가격으로 해두고 90을 쳐보도록 하자.

 

가격에 90이 포함된 모든 가격을 가져오게 된다.(와!!)

 

3. 결론

이렇게 예제는 끝이다. 다음으로는 이 ajax통신을 회원가입할 때 로그인 중복확인 용도로 한번 써볼까 한다.

 

강사 曰

예제 6번과 7번의 경우 선을 씨게 넘었다.

 

....라고 한다.

실질적으로 사용하는데에 예제 1~3번? 정도면 충분하다고 하심..

그렇다고 모르는 거 보단 메모해두면 언젠가는 쓰겠지....

저작자표시 (새창열림)

'3층 1구역 - 개발의 장 > ajax통신' 카테고리의 다른 글

ajax - ajax를 이용해 아이디 중복체크 하는 예제 (2022-10-24)  (0) 2022.10.25
ajax - 예제 java 및 Mapper코드 (2022-10-24)  (0) 2022.10.24
ajax - Json을 이용한 제목! 일부검색 (2022-10-24)  (0) 2022.10.24
ajax - Json파일의 내용을 DB에 저장하기 (2022-10-21)  (1) 2022.10.23
ajax - json 이용하기, 부제 : Json파일 검색하기 (2022.10.21)  (0) 2022.10.23

관련글

티스토리툴바