您的位置：首页 > Web前端 > JQuery

ajax+json+jquery第一个mvc例子

2009-05-22 14:25 323 查看

昨天才调通例子,从不懂ajax,json,jquery开始,经过了很多困难,拿出来给同样刚学习的朋友分享下...高手就当路过了.
<html>部分
<div id ="div1"> </div1>
<input type = button id = "ajax1" value = "ajax">

----------------------------------------------------------------------------------------------------------------------------------------------
<script>部分

$(document).ready(function(){
$('#ajax1').click(function(){

$.getJSON('text2.do',{
pass: "now is" //参数后台就可以直接用request取得
},function(json){ //返回函数 ,后台写好了response的时候就返回这里

var len = json.length;

var str="";
str = "<table id = 'table1'><tr id ='tr'><td>姓名</td><td>年龄</td><td>工作</td><td>所在地</td>";
for (var i=0; i<len;i++) {

str +="<tr id = 'tr1' ><td id = 'name'>"+json.name+"</td>";
str +="<td id = 'age'>"+json.age+"</td>"
str +="<td id = 'job'>"+json.job+"</td>"
str +="<td id = 'add'>"+json.address+"</td></tr>"
}
str +="</table>";

$('#div1').html(str);

--------------------------------------------------------------------------------------------------------------------------------------------------
$('tr').each(function(i){ //上一行实际就完成使命了,这里好玩试验了下隔行变色的效果.
if (i%2==0) {
$(this).addClass("css_a");
}
});

$('tr').each(function(i){
if (i%2==1) {
$(this).addClass("css_b");
}
}); //这个each方法好象不能写在返回函数的外面..大概是因为'tr'是返回函数里才生成的.而且==0和==1都不能用if ,else写在一起判断,不知道为什么..

$('#table1 tr').hover(function() { //这里鼠标滑过的时候变色
$(this).addClass('css_c');

}, function() {

$(this).removeClass('css_c');
}
);

});
});
}); //css部分就没写了,我随便用了几个颜色.

-----------------------------------------------------------------------------------------------------------------------------------

后台部分,用了json-lib2.2.1-jdk1.5.jar
主要还需要一些jar包. 之前下载了很多都不好用,弄到昨天2点多,原来要版本一一对应才行.
commons-lang.jar、commons-logging.jar，commons-beanutils.jar、ezmorph-1.0.1.jar
还有一个commons-collection-3.2.jar ,这个开始我用的1.0版本,始终找不到class,郁闷了好久.

到后台就几句话,

net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(list); //从数据库里像以前那样取得你的list
response.setCharacterEncoding("utf-8"); //转码.不然很难看.
response.getWriter().print(jsonArray); // 将 json 串写入输出流中

// 调用基类方法，转化成json方式

return null;

补充下

str +="<tr id = 'tr1' ><td id = 'name'>"+json.name+"</td>";
str +="<td id = 'age'>"+json.age+"</td>"
str +="<td id = 'job'>"+json.job+"</td>"
str +="<td id = 'add'>"+json.address+"</td></tr>"

这里json后面都有,不知道为什么2次都编辑不上去.

照着做了一下，也成功了，楼主这里少加了
str +="<tr id = 'tr1' ><td id = 'name'>"+json.name+"</td>";
str +="<td id = 'age'>"+json.age+"</td>"
str +="<td id = 'job'>"+json.job+"</td>"
str +="<td id = 'add'>"+json.address+"</td></tr>"
}
应该是json.name等
晕，为什么数组不能打呀，就象这样的jsgon[k].name,i不能打

('tr').each(function(i){ //上一行实际就完成使命了,这里好玩试验了下隔行变色的效果.
if (i%2==0) {
$(this).addClass("css_a");
}
});

$('tr').each(function(i){
if (i%2==1) {
$(this).addClass("css_b");
}
});

这个问题可以用过滤器来处理哈，
你这样写太累了点。
有filter可以使用的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航