如何用ajax url而不是Spring form标签RequestMapping?

时间:2017-08-09 05:53:50

标签: javascript html ajax spring spring-mvc

urrently我的adminMainPage配置如下。 enter image description here

使用类型值和关键字进行搜索时,

我想在不移动页面的情况下隐藏memberList div, 并显示结果列表div。

我在这里遇到很多麻烦。 我没有在当前表单标签中添加操作, 和onsubmit ="返回searchMember();"我写了这个。

<form name="form" action="memberSearch.do" onsubmit="return searchMember();" method="GET">
    <div class="menu_btn_zone">
        <div class="member_management_btn">
            // left menu
        </div>
        <div class="admin_setPermissions_btn">
            // right menu
        </div>
    </div>
    <div class="member_management_area" style="display:block">
        <div class="member_search">
         // member_search content
        </div>
        <div class="show_allMember" style="position: absolute;top: 155px;left: 1244px;font-size: 20px">
            //show_allMember content
        </div>
    </div>
    <div class="memberListZone">
        <table class="table">
            <thead>
                <tr>
                    <th style="text-align: center">회원 번호</th>
                    <th style="text-align: center;width: 150px">회원 아이디</th>
                    <th style="text-align: center;width: 100px;">회원 생일</th>
                    <th style="text-align: center;width: 200px;">회원 전화번호</th>
                    <th style="width: 119px;text-align: center;">회원 이메일</th>
                </tr>
                <c:if test="${memberList eq null || empty memberList}">
                    <span class="noneMember">현재 등록된 회원이 없습니다.</span>
                </c:if>
                <c:forEach items="${memberList}" var="mList">
                    <tr>
                        <td style="text-align: center;width: 100px;">${mList.idx}</td>
                        <td style="text-align: center;">${mList.id}</td>
                        <td style="text-align: center;">${mList.birth}</td>
                        <td style="text-align: center;">${mList.phone_1} - ${mList.phone_2} - ${mList.phone_3}</td>
                        <td style="text-align: center;">${mList.email_1} ${mList.email_2}</td>
                    </tr>
                </c:forEach>
        </thead>
        </table>
    </div>
    <div class="resultSearch_memberList_area">
        // resultSearch_memberList_area
    </div>
    <div class="admin_setPermissions_area" style="display:none">
        // admin_setPermissions_area
    </div>
</form>

searchMember()的代码如下所示:

function searchMember()
    {
        var form = document.form;
        var type = form.type.value;
        var keyword = form.keyword.value;

        $('.memberListZone').css('display','noe');
        $('.resultSearch_memberList_area').css('display','block');

        $.ajax
        ({
            type: 'GET',
            url: 'memberSearch.do',
            data: {"type":type,"keyword":keyword},
            dataType: 'JSON',
            success: function(response)
            {
                alert('hihi');
                console.log('hihi',response);
            },
            error: function(xhr,ajaxOptions,thrwonError)
            {
                if(xhr.status == 404)
                {
                    alert(thrownError);
                }
            }
        })
    }

我的控制器代码是

 // admin Main Page
@RequestMapping("adminPage.do")
    public String adminPage(Model model)
    {
        List<HashMap<String, Object>> allMember = aService.getMemberList();
        model.addAttribute("memberList",allMember);
        System.out.println("model is that ! : " + model);

        return "adminMainPage";
    }


// Url requested by searchMember()  
    @RequestMapping(value="memberSearch.do",produces=MediaType.APPLICATION_JSON_UTF8_VALUE,method=RequestMethod.POST)
    public ModelAndView searchMemberList(
            @RequestParam(defaultValue="0") int type,
            @RequestParam(required=false) String keyword,
            HttpSession session)
    {

        ModelAndView mav = new ModelAndView();
        HashMap<String, Object> params = new HashMap<String, Object>();

        params.put("type", type);
        params.put("keyword", keyword);

        if(type == 1)
        {
            params.put("id", keyword);
            System.out.println("param is that : " + params );
        }
        else if(type == 2)
        {
            params.put("id", keyword);
            System.out.println("param is that : " + params );
        }
        else if(type == 3)
        {
            params.put("phone_3",keyword);
            System.out.println("param is that : " + params );
        }
        mav.addAllObjects(params);
        System.out.println("mav is : " + mav);
        return mav;
    }

这是我的管理员页面流程。

  1. admin.do(请求显示管理员登录页面)

  2. memberSearch.do(搜索会员时) (当您在输入窗口中按Enter键时,searchMenu()url的请求))

  3. adminPage.do(当您登录时,管理员主屏幕(搜索框和成员列表显示在下方))

  4. 但是,当您搜索某个成员时,它会查找adminMainPage.do请求,而不是memberSearch.do,它会映射ajax url。

    此外,我不知道为什么我要访问adminPage.do,因为我在当前的jsp文件中没有任何请求。

    我的映射是否错误? 你能告诉我我做错了什么吗? 我需要做些什么才能得到我想要的东西?

    请帮助我。

0 个答案:

没有答案