基于jquery異步傳輸json數(shù)據(jù)格式實例代碼
更新時間:2013年11月23日 14:53:48 作者:
這篇文章主要介紹了jquery異步傳輸json數(shù)據(jù)格式實例代碼,有需要的朋友可以參考一下
1.jsp代碼如下
復(fù)制代碼 代碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.1.js"></script>
</head>
<script type="text/javascript">
$(function(){
$("#getResult").click(function(){
$.ajax({
type:"post",
url:"<%=basePath%>jsonAction!getData.action",
dataType:"json",
data:{'param1':$("#param1").attr("value"),'param2':$("#param2").attr("value")},
success:function(returnData){
var html = "<table border='1'><tr><td>編號</td><td>姓名</td><td>描述</td></tr>";
for(var i = 0; i < returnData.length; i++){
html += "<tr><td>"+returnData[i].id+"</td><td>"+returnData[i].name+"</td><td>"+returnData[i].description+"</td></tr>";
}
$("#result").html(html);
}
});
});
});
</script>
<body>
<input type="text" value="haha" id="param1">
<input type="text" value="hehe" id="param2">
<div id="result"></div>
<input type="button" value="獲取" id="getResult">
</body>
</html>
2.訪問 action代碼如下
復(fù)制代碼 代碼如下:
public class JsonAction extends ActionSupport{
public void getData() throws IOException
{
HttpServletRequest req = ServletActionContext.getRequest();
String p1 = req.getParameter("param1");
String p2 = req.getParameter("param2");
HttpServletResponse rep = ServletActionContext.getResponse();
rep.setContentType("text/json;charset=utf-8");
PrintWriter pw = rep.getWriter();
String data = "[{\"id\":\"01\",\"name\":\"zhongqian\",\"description\":\""+p1+"\"},{\"id\":\"02\",\"name\":\"zhangsan\",\"description\":\""+p2+"\"}]";
pw.print(data);
pw.flush();
}
}
3.效果如下:
您可能感興趣的文章:
- JQuery 解析多維的Json數(shù)據(jù)格式
- jqeury eval將字符串轉(zhuǎn)換json的方法
- JSON 數(shù)據(jù)格式介紹
- Json對象與Json字符串互轉(zhuǎn)(4種轉(zhuǎn)換方式)
- js 將json字符串轉(zhuǎn)換為json對象的方法解析
- android調(diào)用國家氣象局天氣預(yù)報接口json數(shù)據(jù)格式解釋
- 解析JSON對象與字符串之間的相互轉(zhuǎn)換
- android 解析json數(shù)據(jù)格式的方法
- Android App數(shù)據(jù)格式Json解析方法和常見問題
- jQuery.parseJSON(json)將JSON字符串轉(zhuǎn)換成js對象
- PHP中使用json數(shù)據(jù)格式定義字面量對象的方法
- 實例詳解JSON數(shù)據(jù)格式及json格式數(shù)據(jù)域字符串相互轉(zhuǎn)換
相關(guān)文章
使用jquery給指定的table動態(tài)添加一行、刪除一行
今天在項目中,剛好用到給指定的table添加一行、刪除一行,就直接找google,搜出來的東西不盡如人意,不是功能不好就是千篇一律,簡直浪費時間還不討好,于是乎就自己動手封裝個,現(xiàn)就把代碼分享出來,避免大伙重復(fù)造輪子,如有問題歡迎大伙拍磚指正,千萬可別人身攻擊2016-10-10ui組件之input多選下拉實現(xiàn)方法(帶有搜索功能)
這篇文章主要介紹了ui組件之input多選下拉實現(xiàn)方法(帶有搜索功能)的相關(guān)資料,需要的朋友可以參考下2016-07-07基于jQuery實現(xiàn)中英文切換導(dǎo)航條效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09jQuery+css+html實現(xiàn)頁面遮罩彈出框
面遮罩彈出框已經(jīng)不是一個陌生的話題了,實現(xiàn)的方法大同小異多種多樣,今天用jQuery實現(xiàn)頁面遮罩彈出框,主要用的技術(shù)有JQuery,css和html,感興趣的朋友可以參考下哈2013-03-03EasyUI?Pagination如何實現(xiàn)分頁功能getPager
這篇文章主要介紹了EasyUI?Pagination如何實現(xiàn)分頁功能getPager問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04jQuery實現(xiàn)Twitter的自動文字補(bǔ)齊特效
本文介紹了一款jQuery實現(xiàn)的文字自動補(bǔ)全特效的插件,該插件可以結(jié)合本地數(shù)據(jù)進(jìn)行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲的方式(localstorage與sessionstorage、IndexedDB、離線緩存manifest文件)2014-11-11