ajax+json+jquery第一个mvc例子

最新推荐文章于 2025-04-13 10:54:44 发布

shaily

最新推荐文章于 2025-04-13 10:54:44 发布

阅读量1.3k

点赞数

分类专栏： Jquery Jquery 文章标签： json ajax jquery function css table

Jquery 同时被 2 个专栏收录

16 篇文章

订阅专栏

Jquery

16 篇文章

订阅专栏

昨天才调通例子,从不懂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可以使用的