Struts+JSP+JS+Ajax——常用用法Mark

多年不做前段了，什么都要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即可看到。