How to display values without page loading with Spring and ajax?

Question

If you click on the bootstrap icon, you want to load the member list below the search bar without moving the page.

So I wrote the code this way.

AdminCotroller.java

// show AdminMainPage
@RequestMapping("adminPage.do")
public String adminPage(
        @RequestParam(required = false) String keyword,
        @RequestParam(defaultValue="0") int type,
        HttpSession session,HttpServletRequest resquest,HttpServletResponse response) throws IOException
{
    ModelAndView mav = new ModelAndView();
    HashMap params = new HashMap();

    params.put("type", type);
    params.put("keyword", keyword);
    System.out.println(params);


    return "adminMainPage";
}

// show_allMember Request
@RequestMapping("show_allMember.do")
public ModelAndView memberList()
{
    ModelAndView mav = new ModelAndView();

    mav.addObject("memberList", aService.getMemberList());
    mav.setViewName("");
    System.out.println("mav is : " + mav);

    return mav;
}

The jsp file is shown below.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>












Insert title here




    
        
            회원관리
        
        
            관리자 권한 설정
        
    
    
        
            
                
                검색 유형을 선택하세요
            
            
                
                    
                
                
        
        
            회원전체보기
        
    
    
        - MEMBER LIST ZONE -
    
    
        - Admin -

There are two menus at the top, if you look at the picture. When you click on the menu on the left, you will see a bootstrap emoticon and search bar.

The code for the right bootstrap icon is shown below.


    회원전체보기

My curiosity starts to explode from here.

How can I get only the values from the jsp by putting the values into the ModelAndView without moving the page?
How should the value be displayed when the menu is clicked and implemented?

Spring, ajax, jquery Advisors please give me advice or tell me your plan. If so, I would really appreciate it.

amicoderozer · Accepted Answer

If you don't want to reload the page every time you have to refresh data with ajax calls. To make this you have to write Spring methods that produces json.

You can simply do that tagging the method with produces = "application/json", adding all the data you need in jsp in Model object and returning an empty string:

@RequestMapping(value = "/showAllMembers", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
public String loadData(@RequestParam(value = "param1") String param1, @RequestParam(value = "param2") String param2, Model model){

     List members = aService.getMemberList();
     model.addAttribute("list", members);
     return "";
}

In Spring you can add Model object to every method, is basically the same of ModelAndView and with addAttribute method you can pass what you want to jsp.

To call this method from the jsp use jquery ajax function:

function showMembers(){

    // set the parameters you what
    var data = { param1 : "param1", param2 : "param2"}

    $.ajax({
        //set correct url
        url: localhost/path/showAllMembers,
        type: 'post',
        data: data, 

        success: function(response){

            // response will contain every object you added in model object, so in this case list
            $.each(response.list, function(index, value){
                  // do whatever you want with your data
            });
        }); 
}

How to display values without page loading with Spring and ajax?

Answers (1)

Related Questions