2.1. HelloWorld之jquery
說明：
(1) 這是nutz與html進行相互通訊。Html網頁中使用了jquery
??? (2) netbeans 6.9.1版開發，nutz 1.a.31，jquery 1.3.2
??? (3) 功能：打開new.html網頁，輸入姓名、年齡，按提交，nutz收到new.html發出的信息，然后增加點信息，再返回給new.html。最后new.html顯示返回值
??? (4)這只是一個示例，返回的json還是字符串，如果要直接返回json對象，請看#json視圖。
????
2.1.1. 步驟1 建立新工程HelloNutZ1，并下載jquery1.3.2.js
下載好的jquery 1.3.2 ，放在js文件夾中。Js文件夾位于 WEB-Pages 下。
2.1.2. 步驟2 從官方下載Nutz,并導入新建工程中
方法：選中Libraries,按右鍵，選ADD JAR/Fold,選中解壓后的nutz
2.1.3. 步驟3 配置WEB.xml
下面是完整代碼：新增的僅含有filter
2.1.4. 步驟四 建個網頁，名字任取，如:new.html
代碼說明：
??? 1 特別強調，要把jquery包導入。
??? 2 用了ajax,post,get三種方式與nutz交互
完整代碼：
2.1.5. 建立MainModule.java
說明：
（1） @ Modules ----指明了子模塊為HelloWorld，可以有多個，要用逗號分開
（2） @Fail("json") ---指明了失敗格式為json
完整源代碼：
2.1.6. 建立HelloWorld.java
說明：
（1） 該類必須在MainModule注釋中出現，否則不起作用
（2） @Ok("json")----指明所有入口函數返回形式為json
（3） @At("/yousay")----指明隨后的函數 負責響應網頁或用戶發出的請求。請求格式為：基網址/yousay。例：http://localhost:8084/HelloNutz1/yousay
完整源代碼：
運行后的效果圖
說明：
(1) 這是nutz與html進行相互通訊。Html網頁中使用了jquery
??? (2) netbeans 6.9.1版開發，nutz 1.a.31，jquery 1.3.2
??? (3) 功能：打開new.html網頁，輸入姓名、年齡，按提交，nutz收到new.html發出的信息，然后增加點信息，再返回給new.html。最后new.html顯示返回值
??? (4)這只是一個示例，返回的json還是字符串，如果要直接返回json對象，請看#json視圖。
????
2.1.1. 步驟1 建立新工程HelloNutZ1，并下載jquery1.3.2.js
下載好的jquery 1.3.2 ，放在js文件夾中。Js文件夾位于 WEB-Pages 下。
2.1.2. 步驟2 從官方下載Nutz,并導入新建工程中
方法：選中Libraries,按右鍵，選ADD JAR/Fold,選中解壓后的nutz
2.1.3. 步驟3 配置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.1.4. 步驟四 建個網頁，名字任取，如:new.html
代碼說明：
??? 1 特別強調，要把jquery包導入。
??? 2 用了ajax,post,get三種方式與nutz交互
完整代碼：
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="./js/css/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="./js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$('#send_ajax').click(function (){
var params=$('input').serialize(); //序列化表單的值
$.ajax({
url:'yousay', //后臺處理程序
type:'post', //數據發送方式
dataType:'json', //接受數據格式
data:params, //要傳遞的數據
success:update_page //回傳函數(這里是函數名)
});
});
//$.post()方式：
$('#test_post').click(function (){
$.post(
'yousay',
{
username:$('#input1').val(),
age:$('#input2').val()
},
function (data) //回傳函數
{
var myjson='';
eval('myjson=' + data + ';');
eval('myjson=' + myjson + ';');
$('#result').html("姓名:" + myjson.username + "<br/>年齡" + myjson['age']);
}
);
});
//$.get()方式：
$('#test_get').click(function ()
{
$.get(
'yousay',
{
username:$("#input1").val(),
age:$("#input2").val()
},
function(data) //回傳函數
{
var myjson='';
eval("myjson=" + data + ";");
eval('myjson=' + myjson + ';');
$("#result").html(myjson.age);
}
);
});
});
function update_page (json) //回傳函數實體，參數為XMLhttpRequest.responseText
{
eval("json=" + json + ";");
var str="姓名:"+json.username+"<br />";
str+="年齡:"+json.age+"<br />";
str+="追加測試:"+json.append;
$("#result").html(str);
}
</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="username" id="input1" /></p>
<p><span>輸入年齡:</span><input type="text" name="age" id="input2" /></p>
</form>
<button id="send_ajax">提交</button>
<button id="test_post">POST提交</button>
<button id="test_get">GET提交</button>
</body>
</html>
2.1.5. 建立MainModule.java
說明：
（1） @ Modules ----指明了子模塊為HelloWorld，可以有多個，要用逗號分開
（2） @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.1.6. 建立HelloWorld.java
說明：
（1） 該類必須在MainModule注釋中出現，否則不起作用
（2） @Ok("json")----指明所有入口函數返回形式為json
（3） @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;
}
}
運行后的效果圖
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
