前后端交互 _ JSONArray字符串形式 + jquery的$.ajax()

最新推荐文章于 2024-10-11 17:39:47 发布

yicha_icode

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量245

点赞数

分类专栏： servlet javascript 文章标签： javascript jquery JSONArray ajax 同步

本文链接：https://blog.csdn.net/yicha_i/article/details/82194207

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

servlet

1 篇文章 0 订阅

订阅专栏

操作内容：用servlet从数据库读取一张表，利用json_lib.jar将其解析成json数组字符串，递交给前端html page，它通过jquery操作节点动态生成页面。
前后端数据交换的格式是json数组字符串，jquery的$.ajax()函数自动将后台传过来的标准字符串解析成了json数组对象，在dataType属性里指定返回型”json”。

demo_json_1.html

<!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>演示demo1-前页面</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none}
div{
    margin: 100px auto;
    width: 882px;
    min-height: 500px;
}
ul{
    height: 37px;
}
ul li{
    float: left;
    width: 145px;
    height: 35px;
    line-height: 30px;
    text-align: center;
    font-family: 黑体;
    font-size: 15px;
    border: 1px solid #ddd;
}

</style>
<script type="text/javascript" src="js/jq1.12.js"></script>
<script type="text/javascript">
$(function(){
    var jsonArr;
    $.ajax({
        url:"read.do",
        type:"get",
        dataType:"json",
        async:false,//改成同步的方式，页面加载时必须拿到它
        success:function(msg){
            jsonArr = msg;
        }
    });
    var rows = jsonArr.length;
    var outBox = $("<div></div>");//这样生成的节点对象是jquery对象
    var titleBox = $("<ul></ul>");//取标题栏
    for(var key in jsonArr[0]){
        var tliBox = $("<li>" + key + "</li>");
        tliBox.css({fontWeight:"bolder",background:"#ccc",fontSize:"18px"});
        titleBox.append(tliBox);
    }
    outBox.append(titleBox);
    for(var i = 0; i <　rows;i++){
        var uBox = $("<ul></ul>")
        for(var k in jsonArr[i]){
            var lBox = $("<li>"+jsonArr[i][k] +"</li>");   
            uBox.append(lBox);
        }
        outBox.append(uBox);
    }
    $("body").append(outBox);
    $("div ul:even").css("background","lightblue");    
    });
</script>
</head>
<body>
</body>
</html>

ReadAction.java

package com.bwf.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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

import net.sf.json.JSONArray;

import com.bwf.entity.Courses;
import com.bwf.util.DBUtil;


public class ReadAction extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html,charset=UTF-8");
        PrintWriter out = resp.getWriter();

        List<Courses> cList = new ArrayList<Courses>();
        Connection conn = DBUtil.linkToDB();
        PreparedStatement ps = null;
        ResultSet rs = null;
        String sql = "SELECT * FROM courses WHERE 1=1";
        try {
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();
            while(rs.next()){
                String number = rs.getString(1);
                String img = rs.getString(2);
                String cname = rs.getString(3);
                float price = rs.getFloat(4);
                String start = rs.getString(5);
                String detail = rs.getString(6);
                cList.add(new Courses(number,img,cname,price,start,detail));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        JSONArray jsonArr = JSONArray.fromObject(cList); 
        String jsonArrStr = jsonArr.toString();//转换成了json数组字符串
        out.print(jsonArrStr);//丢给前端解析

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(req, resp);
    }
}