多年不做前段了,什么都要search,一边做一边记录吧
1. JSP页面使用S标签
JSP页面<%page%>后添加 <%@ taglib uri="/struts-tags" prefix="s"%>
Web.xml
添加下面配置
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
</filter-class>
</filter>
2. 使用s:iterator迭代
<s:iterator id="searchResult" value="#request.resultList">
<tr>
<td><div><s:property value="#searchResult.accountNo"/></div></td>
<td><div><s:property value="#searchResult.Id"/></div></td>
<td><div><s:property value="#searchResult.Name"/></div></td>
<td><div><s:property value="#searchResult.status"/></div></td>
<td><div><span id="<s:property value='#accountSearchResult.accountNo'/>" class="spanLink" οnclick="getAccountInfo(this)">Edit</span></div></td>
</tr>
</s:iterator>
结果存放在ArrayList中
ArrayList通过HttpRequest发送到JSP页面(HttpServletRequest request = ServletActionContext.getRequest(); request.setAttribute("resultList", resultList);)
ArrayList中存放Account类,有变量accountNo,Id,Name和status,只要Account类写了 get/set 方法即可
3. 使用s:iterator迭代调用js方法
如上面s:iterator所示,需要编辑每个类的内容时要重新载入该对象内容
思路是span的id为Account的accountNo,通过onclick方法将参数传递到js
function getAccountInfo(obj){
alert (obj.id);
}
这样js可以成功获得该对象的accountNo,然后利用ajax查询
4. Ajax更新页面信息
function getAccountInfo(obj){
alert (obj.id);
var objid = obj.id;
$.ajax({
type : "POST",
url : "getAccInfoJson.do",
async : false,
data :"accountNo="+objid,
success : function(data) {
alert(data);
}
});
}
5. action返回json格式
1). pom.xml添加
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-json-plugin</artifactId>
<version>2.5.10</version>
</dependency>
2).struts.xml定义一个无返回类型的action
<action name="getAccInfoJson" class="com.clare.action.Miaomiaomiao" method="getAccInfoJson">
</action>
3) action中的实现代码
public void getAccInfoJson() throws Exception{
HttpServletResponse response=ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
accountNo = request.getParameter("accountNo");
response.setContentType("text/html");
PrintWriter out;
out = response.getWriter();
Account newAccount=new Account();
newAccount.setAccountNo("expert");
newAccount.setCompanyName("CSL");
JSONObject json=new JSONObject();
json.accumulate("success", true);
json.accumulate("account", newAccount);
out.println(json.toString());
out.flush();
out.close();
}
6. ajax解析action返回json
此时要注意,上面的ajax忘记配置了一个重要参数,如下更正:
function getAccountInfo(obj){
alert (obj.id);
var objid = obj.id;
$.ajax({
type : "POST",
url : "getAccInfoJson.do",
async : false,
data :"accountNo="+objid,
dataType:"json",
success : function(data) {
alert(data);
}
});
}
此时alert出来的内容应该是[Object object]
如果想要查看返回的字符串效果,则将dateType去掉,那么返回的应该是json格式的字符串
然后解析如下
json格式如下
{list:["A","B","C"]}
那么
$.each(data.list,function(index,element){
alert(element);
});
即可
如果返回的只是内容,例如{"name":"Clare","ID":"1111"}
alert(data.name)/alert(data.ID)即可
7. JQuery给input赋值
此时记得Input标签要写id,不是name而是ID!!
$("#account").attr("value",'Clare');
是无法给下面的input赋值的!因为它没有ID
<input name="account" value="">
这样就对了
<input id="account" value="">
textarea标签同上
8. JQuery给radio赋值
if (data.status=='A'){
$("#updStatusA").attr("checked","checked");
$("#updStatusD").attr("checked",false);
}
if (data.status=='D'){
$("#updStatusD").attr("checked","checked");
$("#updStatusA").attr("checked",false);
}
9. JQuery给select赋值
$.each(data.List,function(index,element){
alert(element);
$("#updNo").append("<option value="+element+">"+element+"</option>");
});
注意,<select id="updNo"></seelect>
10. list的一些用法
var list = ['1','2','3'];//初始化
var number = list.length;// 获取list长度
注意list遍历循环要用$.each方法,for循环不行
第一个list是集合,例如下面遍历的alert
var list=['a','b','c'];
$.each(list,function(i,item){
alert(i); alert(item);
});
alert顺序应该是1/a/2/b/3/c
11. checkbox的一些用法
$("#checkbox").attr("checked",false);//未选中
$("#checkbox").attr("disabled",true);//不可修改
但是按照上面的写法,出现如果在两个radio来回切换时,有时会出现设置checked为false失败的情况,此时
$("#checkbox").prop("checked",false); 即可
12. JQuery取出某个select的所有赋值(option)
$("#NoGrid_list option").each(function(){
alert(this.value);
});
其中NoGrid_list为该select的id
如果将其存入array的话,则参考下面代码
var array = new Array();
$("#NoGrid_list option").each(function(){
array.push(this.value);
});
alert (array);
如果希望存入String,则改为下面代码
var NoList ="";
$("#NoGrid_list option").each(function(){
NoList +=(this.value)+",";
});
if (NoList .length > 0) {
NoList =NoList .substr(0,NoList .length - 1);
}
13. JQuery取出select选中的文本(not value)
var selectedValue = $("#updSenderNo").find("option:selected").text();
14. JQuery清空select
$("#updSenderNo").empty();
15. JQuery设置label的值
$("#id").html("testment");
16. 设置select内容改变就触发的方法
$(function(){
$("#selectList").change(function(){
alert("选中的值为:"+$(this).val());
});
});
17. JS里console的用法
在js中使用alert打log会导致程序被阻塞,此时使用console.log()可以很好解决问题
console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Test');
然后在浏览器中打开F12即可看到。