nutz初使用之MVC HelloWorld (netbeans html,js版） -

yunhaifeiwu

浏览: 163208 次
性别:
来自: 宁波

最近访客更多访客>>

testjiang3

weitd

抛出异常的爱

mumuhuiyuan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

nutz初使用之MVC HelloWorld (netbeans html,js版）

博客分类：

nutz

HTML MVC Netbeans json Ajax

HelloWorld之js,与HelloWorld之jquery类似，仅网页部份改动

说明：
    (1) 这是nutz与html进行相互通讯。Html网页中使用js.但js不含如jquery之类插件。
    (2) netbeans 6.9.1版开发，nutz 1.a.31，
    (3) 功能1：打开new.html网页，输入姓名、年龄，按ajax提交，nutz收到new.html发出的信息，增加点信息，返回给new.html。new.html显示返回值
    (4) 功能2：打开new.html网页，输入姓名、年龄，按POST提交，nutz收到new.html发出的信息，增加点信息，返回给客户端。但客户端新开了一页。
    (5) 这只是一个示例，返回的json还是字符串，如果要直接返回json对象，请看#json视图。

2.2.1. 步骤1 从官方下载Nutz,并导入新建工程中
方法：选中Libraries,按右键，选ADD JAR/Fold,选中解压后的nutz
2.2.2. 步骤2 配置WEB.xml
下面是完整代码：新增的仅含有filter

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>

    <filter>
		<filter-name>nutz</filter-name>
		<filter-class>org.nutz.mvc.NutFilter</filter-class>
		<init-param>
			<param-name>modules</param-name>
			<param-value>MainModule</param-value>
		</init-param>
	</filter>

	<filter-mapping>
		<filter-name>nutz</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

2.2.3. 步骤3 建个网页名字任取，如:new.html
代码说明：
用了ajax,post两种方式与nutz交互
完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        //ajax方式，与nutz通讯
        function subMit1() {
            var xmlHttp=false;
            try {
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
            try {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp=false;
            }
            }
            if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
                xmlHttp=new XMLHttpRequest();
            }

            var username=document.getElementById("username").value;
            var age=document.getElementById("age").value;
            var url="yousay?username="+username+"&age="+age;
            xmlHttp.open("POST",url,true);//提交数据
            xmlHttp.onreadystatechange=function(){//服务器返回状态
                //服务成功接收并受回数据
                if(xmlHttp.readyState==4){
                    alert(xmlHttp.responseText);
                    eval("json=" + xmlHttp.responseText + ";");
                    eval("json=" + json + ";");
                    var str="姓名:"+json.username+"<br />";
                    str+="年龄:"+json.age+"<br />";
                    str+="追加测试:"+json.append;
                    document.getElementById("result").innerHTML=str;

                }
            }
            xmlHttp.send(null);
        }

        //方便网页向nutz传递参数的观察
        function subMit() {
            var username=document.getElementById("username").value;
          
            var age=document.getElementById("age").value;
          /*  window.location.href = "yousay?username="+username+"&age="+age;*/
            document.location.href = "yousay?username="+username+"&age="+age;;

            
        /*    document.forms[0].action = "yousay?username="+username+"&age="+age;;
            document.forms[0].method = "post";
            document.forms[0].submit(); */
        }
    </script>
  </head>
  <body>
      <div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
      <form id="formtest" action="" method="post">
        <p><span>输入姓名:</span><input type="text" name="username1" id="username" /></p>
        <p><span>输入年龄:</span><input type="text" name="age1" id="age" /></p>
      </form>
      <button id="send_ajax" onclick="subMit1()">Ajax提交</button>
      <button id="test_post" onclick="subMit()">POST提交(返回值另开新网页）</button>
    </body>    

</html>

2.2.4. 建立MainModule.java
说明：
（3） @ Modules ----指明了子模块为HelloWorld，可以有多个用逗号分开
（4） @Fail("json") ---指明了失败格式为json
完整源代码：

import org.nutz.mvc.adaptor.PairAdaptor;
import org.nutz.mvc.annotation.*;
import org.nutz.mvc.ioc.provider.JsonIocProvider;

 @Modules({HelloWorld.class}) @Fail("json")
public class MainModule {}

2.2.5. 建立HelloWorld.java
说明：
（4）该类必须在MainModule注释中出现，否则不起作用
（5） @Ok("json")----指明所有入口函数返回形式为json
（6） @At("/yousay")----指明随后的函数负责响应网页或用户发出的请求。请求格式为：基网址/yousay。例：http://localhost:8084/HelloNutz1/yousay
完整源代码：

import org.nutz.lang.Strings;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;
import org.nutz.mvc.annotation.Param;

 @Ok("json")
public class HelloWorld {
         @At
         public String say() {
                 return "Hello world";
         }

         @At("/yousay")
         public String sayMore(@Param("username") String username,
                 @Param("age") String age ) {
                 if (Strings.isBlank(username))
                         return say();
                 String str="{'username':'" + username +"','age':'"+age+"','append':'nuzamAppend'}";
                 return str;
         }
}