我们的网站一开始都是由前台提交表单到action,每次一个小操作整个页面都会刷新,影响用户体验,这次由我实现部分功能的局部刷新,但是初学ajax遇到不少问题
1、我们在struts.xml外扩展了一个xml来写json类型传值的action配置,我改完后直接新写了一个:
<action name="addAccount2" class="random1.action.addAccount2"> <result name="showAccount" type="json"> <param name="root">list</param> </result> </action>
但是忘了删掉原来的导致出错:
<!-- <action name="addAccount2" class="random1.action.addAccount2"> <result name="nextaction" type="chain" > account </result> <result name="failure" type="freemaker"> /error.jsp </result> </action> -->
2、json传送数据后全变为小写
我在action里把取到的数据(list)转换成JSON,success函数里循环读取json的数据,但是在把新的内容append到相应的块里的时候,list里的对象属性首字母都是大写的,append的时候我自然写成大写,然而发现取到的都是undefined。查阅资料后,发现别人都是改成小写的,我改为小写的之后就正确了。
3、局部刷新后,相应块的js失效
本来有个下拉的js,局部刷新后居然失效了,
$(document).ready(function(){ $("ul.expmenu li > div.header").click(function() { var arrow = $(this).find("span.arrow"); alert("arrow"); if(arrow.hasClass("up")) { arrow.removeClass("up"); arrow.addClass("down"); } else if(arrow.hasClass("down")) { arrow.removeClass("down"); arrow.addClass("up"); } $(this).parent().find("ul.menu").slideToggle(); }); });
解决无果后,只好把该效果放到了onclick事件里:
<script> function showcontent(id){ //alert(id); var str="list"+id; /* $("div").children(".list").hide(); $("#"+str).show(3000); */ var arrow = $("#"+id).find("span.arrow"); if(arrow.hasClass("up")) { arrow.removeClass("up"); arrow.addClass("down"); $("#"+str).hide(); } else if(arrow.hasClass("down")) { arrow.removeClass("down"); arrow.addClass("up"); $("#"+str).show(3000); } $("#"+id).find("ul.menu").slideToggle(); } </script>