关于jsp返回json数据给前台javascript

来源:互联网 发布:matlab 矩阵完全复制 编辑:程序博客网 时间:2024/04/29 14:28

在web开发中,很多地方涉及到前后端数据交互,对于数据的处理很多可以放在前端javascript中进行处理,处理后将结果传给后端服务器,前台传送数据给后端,最方便的直接可以用jquery中对ajax封装的一些方法将数据传送,这是前台传数据给后台。然而,有时会涉及到后台传送数据给前台。此时,如果你只是单纯的想传送一句字符串给前台,那么可以直接根据response.getWriter()来获取输出流,然后直接用里边的write()方法便可以将输出内容返回给前台,前台根据ajax里边成功传送后的回调函数里边的参数data,data即后台返回前台的那一句字符串。

但是,大多数时候,ajax被用于动态刷新,比如在购物网站之中,在商品列表下点击更多按钮,此时便会有很多的商品数据没有经过页面刷新,而是通过局部刷新的效果来实现商品的加载。此时,后台服务器传送到前台的便不是简单的一句话,而是一个对象数组。数据的格式也变为json。

JSON(JavaScript Object Notation) ,顾名思义,是javascript数据对象,是一种轻量级的数据交换格式。

  后端传送对象给前台时,首先需将java中的对象转换成json对象,此时需要用到一个jar包,我用的是json.jar。将其添加到工程项目文件夹的lib目录下即可。

来上一组代码:

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;


import model.Order_item;

public class GetOrderServlet extends HttpServlet {


protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<Order_item> order_items=null;
if(request.getSession().getAttribute("order")!=null){
order_items=(ArrayList<Order_item>)request.getSession().getAttribute("order");
JSONArray jsa=new JSONArray();
try {
for(int i=0;i<order_items.size();i++){
JSONObject jsonb=new JSONObject();
jsonb.put("goods_Id", order_items.get(i).getGoods_id());
jsonb.put("goods_Name", order_items.get(i).getGoods_name());
jsonb.put("order_Id", order_items.get(i).getOrder_id());
jsonb.put("goods_Num",order_items.get(i).getGoods_num());
jsonb.put("goods_Price", order_items.get(i).getGoods_price());
jsonb.put("total_price", order_items.get(i).getTotal_price());
jsonb.put("user_id", order_items.get(i).getUser_logname());
jsa.put(jsonb);
}
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
response.setContentType("text/json; charset=UTF-8");  
PrintWriter out=response.getWriter();
out.println(jsa.toString());
}
}


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


doGet(request, response);
}


}

在项目里边添加了json.jar包之后,便可以用里边的JSONObject和JSONArray 两个类。JSONObject就是在java里边创建一个json对象,并且可以用里边的put方法往里边添加属性和属性值。JSONArray便是创建一个json数组,因为你往往不是传一个对象数据返回给前台,而是一组数据,所以你需要把你创建的每一个JSONObject通过JSONArray 下边的put方法添加到JSONObject这个你创建的json数组对象里边,然后你只需要根据 response.getWriter()来获取输出流,然后传给前台,别忘了设置数据格式为text/json,字符编码这里为utf-8国际通用编码。

下边为前台接收代码:

$.post('<%=request.getContextPath()%>/SearchServlet',{search_text:$("#search").val()},function(data){

for(var i=0;i<data.length;i++){
$("#container>ul").append("<li title='"+data[i].goods_Id+"'><img src='"+data[i].goods_Adress+"'>

<div class='shop_information'><h3>"+data[i].goods_Name+"&nbsp;&nbsp;<strong style='color:red;'>"

+data[i].goods_Price+"</strong>/斤</h3>

<a href='javascript:reduce_num()' class='reduce' style='display:none;'>-</a><span class='shoppong_num'>0</span>

<a href='javascript:add_num()' class='add'>+</a></div></li>");
}
},"json")

上述代码通过局部刷新的方式往页面里边添加DOM节点,$.post为jquery中封装的post方式的ajax方法,别往后在最后边填写“json”这个参数,表示后台返回的数据为json格式。


0 0
原创粉丝点击