窗口 - dialog - 与后端交互

Posted 2020-08-25 KoKo

与后端交互，一般需要提交表单数据，所以，这次渲染得dialog其实是一个<form>

<form id="loginForm">
    <table align="center">
        <tr>
            <th align="right">用户名</th>
            <td>
                <input type="text" name="username"/>
            </td>
        </tr>
        <tr>
            <th align="right">密码</th>
            <td>
                <input type="password" name="password"/>
            </td>
        </tr>
    </table>
</form>


使用JS的方式渲染表单为对话框

<script type="text/javascript">
    var loginForm;//被循环选择的对象提取出来,这样就用选择器选择一次就够了
    $(function () {
        loginForm = $("#loginForm").dialog({
            title: "登陆",
            width: 250,
            height: 150,
            modal: true,
            closable: false,//登录框不允许关闭,所有去掉关闭按钮
            buttons: [
                {
                    text: "登陆",
                    handler: function () {
                        console.log("登陆");
                    }
                }, {
                    text: "注册",
                    handler: function () {
                        console.log("注册");
                    }
                }
            ]
        });
    })
</script>




其实用window组件也能做登录框，但是考虑到如果使用window组件的话，还得自己编写两个（甚至三个）按钮，

所以就使用dialog，直接使用其buttons属性，在底部渲染出两个按钮。以上，用console.log()的方式模拟了等于与注册的操作。

那么如何真实的与后端进行交互呢？

有两种方式

第一种：Ajax

var formData = {
    username:$("input[name=‘username‘]").val(),
    password:$("input[name=‘password‘]").val(),
};
$.ajax({
    type:"POST",
    url:"<%=homePage%>/testController/login.ajax?type=json",
    dataType:"JSON",//预期服务器返回的数据类型
    contentType:"application/json",//发送的数据类型
    data:JSON.stringify(formData),//将JSON对象转化成JSON的字符串形式
    success:function(data){
        if ("0" == data.st){
            console.log("登陆成功");
        }else{
            console.log("登陆失败");
        }
    }

})

对应的后端

@RequestMapping(value = "/login.ajax",params = "type=json")
@ResponseBody
public Map<String,String> login1(@RequestBody Map<String, String> map){
    logger.debug("请求参数:"+map);

    Map<String,String> map1 = login(map);

    return map1;
}

说明：前端发送给后端的所有数据，本质上都只可能是字符串，所以，当我在发送Ajax请求的时候，因为指定了 contentType 为 application/json，所以，需要将json对象

转换成JSON字符串。而使用Spring MVC作为后端在接收的时候，需要使用@RequestBody注解，该注解将JSON字符串转换成指定的对象，这里转换成了Map

如果不希望通过JSON字符串发送，则可以如下：

handler: function () {
    console.log("登陆");
    var formData = {
        username:$("input[name=‘username‘]").val(),
        password:$("input[name=‘password‘]").val(),
    };
    $.ajax({
        type:"POST",
        url:"<%=homePage%>/testController/login.ajax?type=form",
        dataType:"JSON",//预期服务器返回的数据类型
        data:formData,
        success:function(data){
            if ("0" == data.st){
                console.log("登陆成功");
            }else{
                console.log("登陆失败");
            }
        }

    })
}


发送的时候不指定发送的类型，默认是  application/x-www-form-urlencoded;  就是k1=v1&k2=v2 的字符串形式
后端也要做相应的改动

@RequestMapping(value = "/login.ajax",params = "type=form")
@ResponseBody
public Map<String,String> login2(@RequestParam Map<String, String> map){
    logger.debug("请求参数:"+map);

    Map<String,String> map1 = login(map);
    return map1;
}

第二种：EasyUI的Form表单组件