Spring Json View之高速开始(一) _JavaScript

Spring Json View之快速开始(一)

快速开始－用Controller-Interface提交Get请求

在Spring中不支持控制器接口的验证或绑定。它却能容易地处理来自Get方式的请求。

这个示例在Controller中仅仅返回一个Model-Map的Json字符串，没有包含错误或者格式转换。

下面显示了创建一个简单的Json GET 控制器的所有代码。

Spring ApplicationContext

<beans>
<bean name="simpleJsonGetController"
   class="org.thing.spring.json.controller.SimpleJsonGetController"/>
<bean name="urlMapping"
class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
<property name="mappings">
<props>
<prop key="/hello.json">simpleJsonGetController</prop>
</props>
</property>
</bean>
<bean name="viewResolver"
class="org.springframework.web.servlet.view.XmlViewResolver" />
</beans>

Spring view.xml

<beans>
<bean name="jsonView" class="org.springframework.web.servlet.view.json.JsonView"/>
</beans>

form.html

<head>

<title>
First Test Spring Json Demo
</title>

<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript" src="script/behaviour.js"></script>
<script type="text/javascript" src="script/behaviour-roles.js"></script>

<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
</head>

<body>

<h1>Spring JSON DEMO</h1>

<h2>Spring Ajax Get (ControlerInterface)</h2>

<b>firstname : </b><span id="firstname"></span><br/>

<b>secondname : </b><span id="secondname"></span><br/>

</br>

<button id="getName">get name</button>

<button id="clearName">clear name</button><br/>

</body>

JavaScript behaviour-roles.js

var printResult = function(transport){

var result =

"Status : " + transport.status

+ "\n"

+ "\n"

+ "Json-Result:"

+ "\n" + transport.responseText;

alert(result);

};

var myrules = {

'button#getName' : function(element){

element.onclick = function(){

new Ajax.Request('hello.json', { method:'get',

onSuccess: function(transport, json){

var json = transport.responseText.evalJSON();

printResult(transport);

$('firstname').innerHTML = json.firstname;

$('secondname').innerHTML = json.secondname;

}

});

}

},

'button#clearName' : function(element){

element.onclick = function(){

$('firstname').innerHTML = '';

$('secondname').innerHTML = '';

}

}

};

Behaviour.register(myrules);

?Controller 源码

public class SimpleJsonGetController implements Controller {

public ModelAndView handleRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
Map model = new HashMap();
model.put("firstname", "Peter");
model.put("secondname", "Schmitt");
return new ModelAndView("jsonView", model);
}
}

? 效果：

?? Status : 200

?Result:

?????????? {"firstname":"Peter","secondname":"Schmitt"}

快速开始- 用Command-Controller提交Post请求

?? Command-Controller提供一个完整的CommandBean，Spring对它提供校验和绑定支持。但是你必须在你的控制器类里添加校验和绑定结果。它处理简单的Post请求非常容易。这个示例在Command-Controller中仅仅返回一个Model-Map的Json字符串，没有包含错误或者格式转换。

Spring ApplicationContext

<beans>
    <bean name="simpleJsonPostFormController"
          class="org.thing.spring.json.controller.SimpleJsonPostFormController">
            <property name="commandClass">            <value>org.thing.spring.json.controller.SpringJsonForm</value>
            </property>
    </bean>
    <bean name="urlMapping"
class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        <property name="mappings">
            <props>
                <prop key="/hello.json">simpleJsonPostCommandController</prop>
           </props>
        </property>
    </bean>
    <bean name="viewResolver"
class="org.springframework.web.servlet.view.XmlViewResolver" />
</beans>

?Spring view.xml

<beans>
    <bean name="jsonView" class="org.springframework.web.servlet.view.json.JsonView"/>
</beans>

?form.html

<head>
        <title>
                First Test Spring Json Demo
        </title>
        <script type="text/javascript" src="script/prototype.js"></script>
        <script type="text/javascript" src="script/behaviour.js"></script>
        <script type="text/javascript" src="script/behaviour-roles.js"></script>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
</head>
<body>
        <h1>Spring JSON DEMO</h1>
        <h2>Spring Ajax Post (SimpleFormControler and CommandController)</h2>
        <form method="post" id="form">
                <input id="placeofbirth" type="text" name="placeofbirth" ><br>
                <input id="birthday" type="text" name="birthday" ><br/>
                <br/>
                <b>place of birth : </b><span id="t_placeofbirth"></span><br/>
                <b>birthday : </b><span id="t_birthday"></span><br/>       
        </form>
        <br/>
        <button id="clearData">clear name</button>
        <button id="cc_postData">send data to CommandController</button>
</body>

JavaScript behaviour-roles.js

var printResult = function(transport){
                var result =
                        "Status : " + transport.status
                        + "\n"
                        + "\n"
                        + "Json-Result:"
                        + "\n" + transport.responseText;
                alert(result);
};

var myrules = {
        'button#clearData' : function(element){
                element.onclick = function(){
                        $('t_placeofbirth').innerHTML = '';
                        $('t_birthday').innerHTML = '';
                        $('error').innerHTML = '';

        },
        'button#cc_postData' : function(element){
               element.onclick = function(){
                        new Ajax.Request('hello.json', {
                                method:'post',
                                parameters: $('form').serialize(false),
                                onSuccess: function(transport){
                                        var json = transport.responseText.evalJSON();
                                        printResult(transport);
                                        $('t_placeofbirth').innerHTML = json.placeofbirth;
                                        $('t_birthday').innerHTML = json.birthday;
                                        $('error').innerHTML = '';
                        },
                        onFailure: function(transport){
                                printResult(transport);
                                addErrors(transport);
                        }
                        });
                }
        }
};
Behaviour.register(myrules);

CommandBean

public class SpringJsonForm {

        private String placeofbirth;
        private Date birthday;
        public String getPlaceofbirth() {
                return placeofbirth;
        }
        public void setPlaceofbirth(String placeofbirth) {
                this.placeofbirth = placeofbirth;
        }
        public Date getBirthday() {
               return birthday;
        }
        public void setBirthday(Date birthday) {
                this.birthday = birthday;
        }

}

?? 控制器源码

public class SimpleJsonPostCommandController extends AbstractCommandController {
        @Override
        protected void initBinder(HttpServletRequest request,  
                        ServletRequestDataBinder binder) throws Exception{
                SimpleDateFormat dateFormat = new SimpleDateFormat("dd-MM-yyyy");
                CustomDateEditor editor = new CustomDateEditor(dateFormat, true);
                binder.registerCustomEditor(Date.class, editor);
        }
        
        @Override
        protected ModelAndView handle(HttpServletRequest request,
                        HttpServletResponse response, Object command,
                        BindException exception) throws Exception {
                
                SpringJsonForm bean = (SpringJsonForm) command;
                
                ModelAndView modelAndView = new ModelAndView("jsonView");
                
                modelAndView.addObject("birthday",  bean.getBirthday());
                modelAndView.addObject("placeofbirth",  bean.getPlaceofbirth());

                return modelAndView;
        }

}

结果?

Status : 200

?Result:

?{"placeofbirth":"Sydney","birthday":"Wed Jan 30 00:00:00 GMT 2008"}