基于jquery異步傳輸json數(shù)據(jù)格式實(shí)例代碼
1.jsp代碼如下
<%@ 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>編號(hào)</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.訪問(wèn) action代碼如下
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對(duì)象與Json字符串互轉(zhuǎn)(4種轉(zhuǎn)換方式)
- js 將json字符串轉(zhuǎn)換為json對(duì)象的方法解析
- android調(diào)用國(guó)家氣象局天氣預(yù)報(bào)接口json數(shù)據(jù)格式解釋
- 解析JSON對(duì)象與字符串之間的相互轉(zhuǎn)換
- android 解析json數(shù)據(jù)格式的方法
- Android App數(shù)據(jù)格式Json解析方法和常見(jiàn)問(wèn)題
- jQuery.parseJSON(json)將JSON字符串轉(zhuǎn)換成js對(duì)象
- PHP中使用json數(shù)據(jù)格式定義字面量對(duì)象的方法
- 實(shí)例詳解JSON數(shù)據(jù)格式及json格式數(shù)據(jù)域字符串相互轉(zhuǎn)換
相關(guān)文章
使用jquery給指定的table動(dòng)態(tài)添加一行、刪除一行
今天在項(xiàng)目中,剛好用到給指定的table添加一行、刪除一行,就直接找google,搜出來(lái)的東西不盡如人意,不是功能不好就是千篇一律,簡(jiǎn)直浪費(fèi)時(shí)間還不討好,于是乎就自己動(dòng)手封裝個(gè),現(xiàn)就把代碼分享出來(lái),避免大伙重復(fù)造輪子,如有問(wèn)題歡迎大伙拍磚指正,千萬(wàn)可別人身攻擊2016-10-10ui組件之input多選下拉實(shí)現(xiàn)方法(帶有搜索功能)
這篇文章主要介紹了ui組件之input多選下拉實(shí)現(xiàn)方法(帶有搜索功能)的相關(guān)資料,需要的朋友可以參考下2016-07-07基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09jQuery+css+html實(shí)現(xiàn)頁(yè)面遮罩彈出框
面遮罩彈出框已經(jīng)不是一個(gè)陌生的話題了,實(shí)現(xiàn)的方法大同小異多種多樣,今天用jQuery實(shí)現(xiàn)頁(yè)面遮罩彈出框,主要用的技術(shù)有JQuery,css和html,感興趣的朋友可以參考下哈2013-03-03jQuery實(shí)現(xiàn)的無(wú)限級(jí)下拉菜單功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的無(wú)限級(jí)下拉菜單,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2016-09-09EasyUI?Pagination如何實(shí)現(xiàn)分頁(yè)功能getPager
這篇文章主要介紹了EasyUI?Pagination如何實(shí)現(xiàn)分頁(yè)功能getPager問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04jQuery實(shí)現(xiàn)Twitter的自動(dòng)文字補(bǔ)齊特效
本文介紹了一款jQuery實(shí)現(xiàn)的文字自動(dòng)補(bǔ)全特效的插件,該插件可以結(jié)合本地?cái)?shù)據(jù)進(jìn)行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲(chǔ)的方式(localstorage與sessionstorage、IndexedDB、離線緩存manifest文件)2014-11-11