窗口 - dialog - 与后端交互

与后端交互，一般需要提交表单数据，所以，这次渲染得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")@ResponseBodypublic 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")@ResponseBodypublic Map<String,String> login2(@RequestParam Map<String, String> map){    logger.debug("请求参数:"+map);

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

第二种：EasyUI的Form表单组件