基于jquery异步传输json数据格式实例代码
2023-06-13 09:15:12 时间
1.jsp代码如下
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="<%=basePath%>js/jquery-1.8.1.js"></script>
</head>
<scripttype="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){
varhtml="<tableborder="1"><tr><td>编号</td><td>姓名</td><td>描述</td></tr>";
for(vari=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>
<inputtype="text"value="haha"id="param1">
<inputtype="text"value="hehe"id="param2">
<div id="result"></div>
<inputtype="button"value="获取"id="getResult">
</body>
</html>
2.访问action代码如下
publicclassJsonActionextendsActionSupport{
publicvoidgetData()throwsIOException
{
HttpServletRequestreq=ServletActionContext.getRequest();
Stringp1=req.getParameter("param1");
Stringp2=req.getParameter("param2");
HttpServletResponserep=ServletActionContext.getResponse();
rep.setContentType("text/json;charset=utf-8");
PrintWriterpw=rep.getWriter();
Stringdata="[{\"id\":\"01\",\"name\":\"zhongqian\",\"description\":\""+p1+"\"},{\"id\":\"02\",\"name\":\"zhangsan\",\"description\":\""+p2+"\"}]";
pw.print(data);
pw.flush();
}
}
3.效果如下:
相关文章
- jQuery入门基础——选择器
- Jquery 监听回车事件与右键事件
- jQuery 实现支持分级标题标签的文章目录
- JS实现简单的jQuery框架(非常详细)
- jQuery parent() parents()和parentsUntil()方法
- 使用CDN加载jQuery.js
- 在NodeJS中使用jQuery file upload plugin
- 跟着JQueryAPI学Jquery之四css
- Jquery插件写法笔记整理
- jQuery方法简洁实现隔行换色及toggleClass的使用
- jquery多选项卡效果实例代码(附效果图)
- Jquery动态改变图片IMG的src地址示例
- jQuery中after的两种用法实例
- 基于jquery编写的横向自适应幻灯片切换特效的实例代码
- Jquery中val()表单取值赋值的实例代码
- 基于jquery插件实现常见的幻灯片效果
- 基于jquery实现的文字淡入淡出效果
- jquery遍历select元素(实例讲解)
- jQuery文本框得失焦点的简单实例
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- jquery移动节点实例
- jquery中one()方法的用法实例
- jQuery元素的隐藏与显示实例
- JQuery$.each遍历JavaScript数组对象实例