匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。jquery&ajax返回json数据进行前后台交互实例
利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据，下面我来演示一个实例。
&先我们看演示代码
&代码如下 复制代码
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
&html xmlns=""&
&meta http-equiv="Content-Type" content="text/
charset=utf-8" /&
&title&Ajax json
test&/title&
&script language="javascript"
src="./jquery-1.7.1.min.js"
/&&/script&
&script language="javascript" src="./ajax_json.js"
/&&/script&
style="font-family:Aline-height:150%"&
href="javascript:getAllUsers();"&获取所有用户信息&/a&
&!-- 用于显示返回结果 --&
id="users"&&/div&
当我们点击 获取所有用户信息在div的id=users中显示
Ajax返回的JSON字符串：
[{"userId":1,"userName":"Raysmond"},{"userId":2,"userName":"u96f7u5efau5764"},{"userId":3,"userName":"Rita"}]
解析出来的结果为：
userId = 1
userName = Raysmond
userId = 2
userName = 雷建坤
userId = 3
userName = Rita
上面代码大家可能看不懂，我们现在来详细介绍
代码如下 复制代码
index.html
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
&html xmlns=""&
&meta http-equiv="Content-Type" content="text/
charset=utf-8" /&
&title&Ajax json
test&/title&
&script language="javascript"
src="./jquery-1.7.1.min.js"
/&&/script&
&script language="javascript" src="./ajax_json.js"
/&&/script&
style="font-family:Aline-height:150%"&
&&h1&Ajax利用JSON进行前后台交互&/h1&
href="javascript:getAllUsers();"&获取所有用户信息&/a&
&&!-- 用于显示返回结果
id="users"&&/div&
&/html&ajax_json.js
function getJson(RequestData,URL){
& type:'POST',
& data:RequestData,
& async:false, //为了简便，设置为同步操作
& cache: false,
& success:function(responseData){
&& reJson=responseD
&return reJ
function getAllUsers(){
&var url = "./service.php";
&var request = 'action=get_all_users';
&//从后台获取并解析，由于上面封装ajax采用的是同步返回，
&//所以这样操作能成功获取返回数据
&var json = getJson(request,url);
&var users =& eval_r('('+ json
&var usersHtml =
'&br/&&span
style="color:"&Ajax返回的JSON字符串：&/span&&br/&'
&&& + json +
'&br/&&br/&&span
style="color:"&解析出来的结果为：&/span&&br/&';
i=0;i&users.++i){
& usersHtml += 'userId = ' + users[i].userId +
+ 'userName = ' + users[i].userName +
&//把构造的HTML利用jQuery动态显示到页面
&$('#users').empty().html(usersHtml);
service.php
&//接受请求参数并根据参数选择操作
&if(isset($_POST['action'])&&$_POST['action']!=""){
switch($_POST['action']){
'get_all_users': getAllUsers();
&//处理请求：以JSON格式返回所有用户信息
&function getAllUsers(){
& $users = array(
array("userId"=&1,"userName"=&"Raysmond"),
array("userId"=&2,"userName"=&"雷建坤"),
array("userId"=&3,"userName"=&"Rita")
& echo json_encode($users);
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。博客分类：
我们知道，jsp向后台传递参数是通过标签实现的：
&form&标签通过&submit&提交数据，传递参数。
或者通过&a& 发送url?name=value的方式传递参数。
后台通过getRequest.getParameter("");即可取得参数值
其实ajax是可以传递参数的。
var url = "xxx.action";
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(244);
//获得 XML 形式的响应数据。
//浏览器的 XML 解析器已完成了对xml的加载
xmlhttp.responseXML;
/* 对xml文件的解析
发生在浏览器xml解析器对xml加载之后
var id = res.getElementsByTagName("tid")[0].childNodes[0].nodeV
ii is "+id);
//document.getElementById("display").innerHTML=
//jsp不做解析处理
document.getElementById("display").innerHTML=xmlhttp.responseT
xmlhttp.open("post",url,true);
//以form表单的形式发送数据，对应xmlhttp.send("str=122");
//后台java代码直接通过request.getParameter("str");的方式获取
xmlhttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); */
/* //以普通文本的形式发送数据，其中包括json的形式，json对应xmlhttp.send("{str:122}");
//后台java代码通过BufferedReader reader = request.getReader();方式获取其二进制编码格式的数据
//不能直接通过request.getParameter("str");的方式获取
//xmlhttp.setRequestHeader('Content-type','text/plain'); */
//提交xml格式的数据
xmlhttp.setRequestHeader("Content-Type", "text/xml");
xmlhttp.send(xmltext);
//xmlhttp.send("str=133");
浏览: 239482 次
来自: 北京
请问eclipse for developers 如何配置共享 ...
我按照这个操作没有成功，
遇到跟楼主一样的问题，根据你的解决办法已经解决了，感谢分享~
wswangyj 写道伟华很勤奋啊 ！呵呵，就是感觉有记录的必 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'用户名：lindianlide
文章数：46
访问量：35978
注册日期：
阅读量：1297
阅读量：3317
阅读量：585175
阅读量：470816
51CTO推荐博文
谈到JSON,简单的说就是一种数据交换格式。近年来，其在服务器之间交换数据的应用越来越广，相比XML其格式更简单、编解码更容易、扩展性更好，所以深受开发人员的喜爱。下面简单的写一下在项目中前后台json传值的一个小例子，供大家参考、查阅。一：前台传后台1.前台jsp页面代码： &在index中将实体对象（自己创建即可）插入list中，再将list集合转化成json数组，利用post方式发送AJAX请求，将这个json数组发送至后台（servlet），再在后台进行解析即可。index.jsp&%@ page language="java" import="java.util.Date,com.badminton.utils.JsonDateValueProcessor,java.text.SimpleDateFormat,java.util.List,net.sf.json.JSONArray,net.sf.json.JSONObject,net.sf.json.JsonConfig,java.util.ArrayList,com.badminton.entity.Athlete,net.sf.json.JSONObject" pageEncoding="utf-8"%&
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&My first json page&/title&
SimpleDateFormat format1 = new SimpleDateFormat("yyyy-MM-dd");
Athlete athlete1 = new Athlete();
athlete1.setAthlete_id(1003);
athlete1.setAthlete_name("林丹");
athlete1.setAthlete_sex("男");
Date athlete_age1 = format1.parse("");//是java.util.date
athlete1.setAthlete_age(athlete_age1);
athlete1.setCoach_id(101);
athlete1.setEvent_id(1);
athlete1.setService_status("1");
athlete1.setExperience("2013年第12届全运会男单冠军。");
Athlete athlete2 = new Athlete();//记录2
athlete2.setAthlete_id(1004);
athlete2.setAthlete_name("鲍春来");
athlete2.setAthlete_sex("男");
Date athlete_age2 = format1.parse("");
athlete2.setAthlete_age(athlete_age2);
athlete2.setCoach_id(101);
athlete2.setEvent_id(1);
athlete2.setService_status("1");
athlete2.setExperience("2011年亚洲羽毛球锦标赛亚军。");
List&Athlete& list1 = new ArrayList&Athlete&();
list1.add(athlete1);
list1.add(athlete2);
JsonConfig jsonConfig = new JsonConfig();//解决date类型的传输问题
jsonConfig.registerJsonValueProcessor(Date.class , new JsonDateValueProcessor());
JSONArray jsonarray = JSONArray.fromObject(list1, jsonConfig);
&script type="text/javascript" src="js/json2.js"&&/script&
&script type="text/javascript"&
function createXmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
parseResults();
//将后台返回的数据显示在层serverResponse中
function parseResults() {
var result=xmlHttp.responseXML.getElementsByTagName("result")[0].firstChild.
alert(result);
function doJSON() {
var athletehead={athlete_id:1,tablename:"athlete"};
var myobj=eval(athletehead);
var str1=JSON.stringify(myobj);//str1以后可用来识别数据库中的表
var str2='&%=jsonarray%&';
var url = "servlet/JsonServlet";
createXmlHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateC//回调
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-text/charset=utf-8"); //text/charset=utf-8：解决汉字封装json问题
xmlHttp.send("athletehead="+str1+"&athlete="+str2);//传送了两个对象
&form id="form1"&
&td align="center"&&input type="button" name="submit" value="提交" onClick="doJSON()"&&/td&
&/html&2.后台解析代码： &后台接受前台传来的json对象，解析插入数据库中，且反给前台一个是否成功的消息。具体插入数据库的代码自己编写一个即可。JsonServlet.javapackage com.badminton.
import java.io.IOE
import java.io.PrintW
import java.sql.D
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import com.badminton.app.AthleteA
import net.sf.json.JSONO
import net.sf.json.JSONA
public class JsonServlet extends HttpServlet {
public JsonServlet() {
public void destroy() {
super.destroy();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
AthleteAction athleteaction=new AthleteAction();
String json1 = request.getParameter("athletehead");//接收athlete表的头数据
String json2 = request.getParameter("athlete");//接收athlete表数据
json1 = java.net.URLDecoder.decode(json1,"UTF-8");
json2 = java.net.URLDecoder.decode(json2, "UTF-8");
if ((json1 != "") && (json2 != "")) {
//System.out.println("json1:"+json1);
JSONObject jsonObject1 =JSONObject.fromObject(json1);//生成json对象
JSONArray jsonArray2 = JSONArray.fromObject(json2);//生成JSON数组
for(int i=0;i&jsonArray2.size();i++){
JSONObject resultObj = jsonArray2.optJSONObject(i);//根据JSONArray生成JSONObject
int athlete_id=resultObj.getInt("athlete_id");
String athlete_name=resultObj.getString("athlete_name");
String athlete_sex=resultObj.getString("athlete_sex");
String age=resultObj.getString("athlete_age");
Date athlete_age = Date.valueOf(age);//转换成java.sql.Date
//System.out.println(athlete_age);
int coach_id=resultObj.getInt("coach_id");
int event_id=resultObj.getInt("event_id");
System.out.println(athlete_name);
String service_status=resultObj.getString("service_status");
String experience=resultObj.getString("experience");
athleteaction.athleteAdd(athlete_id,athlete_name,athlete_sex,athlete_age,coach_id,event_id,service_status,experience);//对数据库进行操作，具体代码未附
String result = "数据上传成功！";
out.println("&response&");
out.println("&result&" + result + "&/result&");
out.println("&/response&");
out.close();
String result = "传输过程出错，请重传！";
out.println("&response&");
out.println("&result&" + result + "&/result&");
out.println("&/response&");
out.close();
} catch (Exception e) {
System.out
.println("JsonServlet doPost(HttpServletRequest request, HttpServletResponse response) 报错："
+ e.getMessage());
public void init() throws ServletException {
}3.解决传递日期的一个工具类 &若没有这个工具类，date型数据会被转化成json数组的格式，后台解析起来会很复杂。JsonDateValueProcessor.javapackage com.badminton.
import java.text.SimpleDateF
import java.util.D
import java.util.L
import net.sf.json.JsonC
import net.sf.json.processors.JsonValueP
public class JsonDateValueProcessor implements JsonValueProcessor{
* datePattern
private String datePattern = "yyyy-MM-dd";
* JsonDateValueProcessor
public JsonDateValueProcessor() {
* @param format
public JsonDateValueProcessor(String format) {
this.datePattern =
* @param value
* @param jsonConfig
* @return Object
public Object processArrayValue(Object value, JsonConfig jsonConfig) {
return process(value);
* @param key
* @param value
* @param jsonConfig
* @return Object
public Object processObjectValue(String key, Object value,
JsonConfig jsonConfig) {
return process(value);
* @param value
private Object process(Object value) {
if (value instanceof Date) {
SimpleDateFormat sdf = new SimpleDateFormat(datePattern,
Locale.UK);
return sdf.format((Date) value);
return value == null ? "" : value.toString();
} catch (Exception e) {
return "";
* @return the datePattern
public String getDatePattern() {
return dateP
* @param pDatePattern the datePattern to set
public void setDatePattern(String pDatePattern) {
datePattern = pDateP
}二：后台传前台后台以list和map两种形式封装json，前台注意json数组和json对象解析时的差别即可。1.TestJson.javapackage com.badminton.
import java.io.IOE
import java.io.PrintW
import java.util.ArrayL
import java.util.HashM
import java.util.M
import java.util.L
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import net.sf.json.JSONA
import net.sf.json.JSONO
public class TestJson extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
String str= request.getParameter("name");//得到ajax传递过来的paramater
System.out.println(str);
PrintWriter out = response.getWriter();
List list = new ArrayList();//传递List
//Map m=new HashMap();//传递Map
User u1=new User();
u1.setUsername("zah");
u1.setPassword("123");
User u2=new User();
u2.setUsername("ztf");
u2.setPassword("456");
list.add(u1); //添加User对象
list.add(u2); //添加User对象
//m.put("u1", u1);
//m.put("u2", u2);
JSONArray jsonArray2 = JSONArray.fromObject( list );//转化成json对象
//JSONObject jo=JSONObject.fromObject(m);//转化Map对象
out.print(jsonArray2);//返给ajax请求
System.out.println(jsonArray2);
//out.print(jo);//返给ajax请求
}2.showjson.jsp 利用Jquery、AJAX异步传输的方式接受后台的发送请求。&%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&script type="text/javascript" src="js/jquery-1.4.2.min.js"&&/script&
&script type="text/javascript"&
function test(){
type:"POST", //请求方式
url:"servlet/TestJson",//请求路径
cache: false,
data:"name=zah", /传参
dataType: 'json',//返回值类型
success:function(json){
alert(json[1].username+" "+ json[1].password);//弹出返回过来的List对象
&input type="button" name="b" value="测试"
&/html&本文出自 “” 博客，请务必保留此出处
了这篇文章
附件下载：　　
类别：┆阅读(0)┆评论(0)
14:36:50 15:58:07
请输入验证码：博客分类：
&!-- 测试点击“查看流程记录 ”时激发的JS --&
&script language="JavaScript" type="text/JavaScript"&
function getJosnData(){
alert($("#formID").val());
url:"/support/pages/poapply/PoApply.do?actionFlag=getAllLoginInfoJsonData",
type: "GET",
dataType: "json",
data: { applyFormID:$("#formID").val()},
success: function(data){
alert("dddd");
//调用创建表和填充动态填充数据的方法.
//检查后台返回的数据
createShowingTable(data)
error: function()
var msg = "&bean:message key="sys.err.unknowerror"/&";
alert(msg);
//动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格
function createShowingTable(data){
//获取后台传过来的jsonData,并进行解析
alert("-------&进入当前的数据展现");
var dataArray = $.parseJSON(data.jsonData);
//此处需要让其动态的生成一个table并填充数据
var tableStr = "&table&";
tableStr = tableStr + "&thead&&td&时间&/td&&td&处理人&/td&&td&具体处理&/td&&/thead&";
var len = dataArray.
if(len&=10){
for(var i=0 ;i& i++){
tableStr = tableStr + "&tr&&td&"+ dataArray[i].PARTICIPANT_TIME +"&/td&"+"&td&"+dataArray[i].PARTICIPANT_ID + "&/td&"+"&td&"+dataArray[i].WF_JOB_POSITION +"&/td&&/tr&";
tableStr = tableStr + "&/table&";
//将动态生成的table添加的事先隐藏的div中.
$("#dataTable").html(tableStr);
&!-- jian实验用途 --&
id="dataTable" style="padding-top:12 text-align:left"&
&a href="javascript:getJosnData()"&
&font color="#00bbff"&
&bean:message key="ec.apply.license.showlog"/&
&!-- jian实验用途 --&
&tr&&td id="formID" value="APF"&&/td&&/tr&
浏览 18765
齐晓威_518
浏览: 307057 次
来自: 郑州
国内的pageoffice插件也可以生成excel。也可以用流 ...
你好，请问这个还有源码吗？我刚开始接触这个，想要源码学习一下. ...
这是增加删除列，，，，
很明显这是增加删除行
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'}