ajax-json_list<stocks> stockss= new arraylist<>();-CSDN博客

本文链接：https://blog.csdn.net/Ward_Tian/article/details/86603664

bean 包

package bean;

public class Stock {
   private String code;
   private String name;
   private Double price;
   public String getCode() {
       return code;
   }
   public void setCode(String code) {
       this.code = code;
   }
   public String getName() {
       return name;
   }
   public void setName(String name) {
       this.name = name;
   }
   public Double getPrice() {
       return price;
   }
   public void setPrice(Double price) {
       this.price = price;
   }


}

-----------------------------------------web包下----------------------------------------------------------

package web;

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

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

import bean.Stock;
import net.sf.json.JSONArray;

public class ActionServlet extends HttpServlet {
   public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {
           String uri=request.getRequestURI();
           String action=uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
           response.setContentType("text/html;charset=utf-8");
           PrintWriter out=response.getWriter();
           if("/quoto".equals(action)) {
               //返回几只股票的信息
               List<Stock> stocks=new ArrayList<Stock>();
               Random r=new Random();
               for(int i=0;i<8;i++) {
                   Stock s=new Stock();
                   s.setName("茅台"+(i+1));
                   s.setCode("60014"+i);
                   s.setPrice((double) r.nextInt(100));
                   stocks.add(s);
               }
               //JSONArray fromObject里面可以传数组或List
               JSONArray jsa=JSONArray.fromObject(stocks);
               String json=jsa.toString();
               System.out.println(json);
               out.println(json);

           }

   }

}

---------------------------------------------------------webapp下的js包----ajax.js---------------------------------------------------------------

----------------------------------------------------------prototype-1.6.0.3.js这个js文件可以下载--------------------------------------------------

--------------------------------------web.xml文件-----------------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<display-name>ajax-day02</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>

<servlet>
   <servlet-name>action</servlet-name>
   <servlet-class>web.ActionServlet</servlet-class>
</servlet>
<servlet-mapping>
   <servlet-name>action</servlet-name>
   <url-pattern>*.do</url-pattern>
</servlet-mapping>

<servlet>
   <servlet-name>action1</servlet-name>
   <servlet-class>web.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
   <servlet-name>action1</servlet-name>
   <url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>

</web-app>

-----------------------------------------------------------------webapp包下stock.jsp---------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<title>Insert title here</title>
<style>
   #d1{
       width:400px;
       height:350px;
       margin-left:300px;
       margin-top:50px;
       background-color:black;

   }
   #d2{
       color:yellow;
       background-color:red;
       height:36px;

   }
   table{
       color:white;
       font-style:italic;
       font-size:24px;
   }
</style>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
   function showStock(){
       setInterval(quoto,4000)//每隔4s发一次请求
   }
   function quoto(){
       //1.获取ajax对象
       var xhr=getXhr();
       //2.发送请求
       xhr.open('get','quoto.do',true);
       //3.绑定事件处理函数
       xhr.onreadystatechange=function(){
           //4
           if(xhr.readyState==4&&xhr.status==200){
               var txt=xhr.responseText;//获取服务器返回数据json字符串
               //alert(txt);
               //将json字符串转换成js对象
               var arr=txt.evalJSON();//变成js对象组成的数组
               var trs='';
               for(i=0;i<arr.length;i++){
                   var s=arr[i];
                   trs+='<tr><td>'+s.code+'</td><td>'+s.name+'</td><td>'+s.price+'</td></tr>';

               }
               //为tbody添加
               $('tb1').innerHTML=trs;

           }
       };
       xhr.send(null);
   }

</script>

</head>
<body style="font-size:30px;"
   οnlοad="showStock();">
   <div id="d1">
       <div id="d2">股票实时行情</div>
       <div id="d3">
           <table width="100%">
               <thead>
                   <tr>
                   <td>代码</td>
                   <td>名称</td>
                   <td>最新价格</td>
                   </tr>
               </thead>
               <tbody id="tb1">
               </tbody>
           </table>
       </div>
   </div>

</body>
</html>

------------------------------------------------------text.html----------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>

}

   function f2() {
       var obj = {
           "company" : "自学网",
           "address" : {
               "city" : "北京",
               "street" : "北三环",
               "room" : 15
           }
       };
       alert(obj.address.street);

   }
   //表示对象组成的数组
   function f3() {
       var arr = [ {
           "name" : "ward",
           "age" : 22
       }, {
           "name" : "Erick",
           "age" : 23
       } ];
       alert(arr[1].name);
   }

   //演示将json字符串转换成js对象
   function f4() {
       var str ='{"name":"wardTian","age":22}';
       var obj=str.evalJSON();
       alert(obj.name);

   }

   function f5(){
       var str='[{"name":"ward","age" : 22},'
       +'{   "name":"Erick","age":23}]';

       //返回的是javascript对象组成的数组
       var arr=str.evalJSON();
       alert(arr[1].name);

   }

</script>

</head>
<body style="font-size: 30px;">

   <a href="javascript:f1();">点击</a>
   <a href="javascript:f2()">第二种演示</a>
   <a href="javascript:f3()">演示对象组成的数组</a></br>
   <a href="javascript:f4()">演示将json字符串转换成js对象</a></br>
   <a href="javascript:f5()">返回js数组演示</a>

</body>
</html>

-------------------------------------------------Junit测试类-------------------------------------------------、

package test;

import java.util.ArrayList;
import java.util.List;

import org.junit.Test;

import bean.Stock;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
*测试json
*/
public class TestCase {
   @Test
   //将java对象转换为json字符传、
   public void test1() {
       Stock s=new Stock();
       s.setName("茅台");
       s.setCode("600014");
       s.setPrice(200.1);
       JSONObject jo=JSONObject.fromObject(s);
       String json=jo.toString();
       System.out.println(json);
   }
   @Test
   public void test2() {
       List<Stock> stocks=new ArrayList<Stock   >();
       for(int i=0;i<3;i++) {
           Stock s=new Stock();
           s.setName("茅台"+(i+1));
           s.setCode("60014"+i);
           s.setPrice(200.1+i);
           stocks.add(s);
       }
       //JSONArray fromObject里面可以传数组或List
       JSONArray jsa=JSONArray.fromObject(stocks);
       String json=jsa.toString();
       System.out.println(json);
   }

}