ajax向后台发送数据

最新推荐文章于 2022-12-12 11:19:06 发布

原创最新推荐文章于 2022-12-12 11:19:06 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前后端交互

java之ssh框架专栏收录该内容

2 篇文章

订阅专栏

这是ajax向后台发送服务器的一个小demo。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
  $(function(){
	  //页面加载完成后，每隔5秒执行一次quoto函数
	  setInterval(quoto,5000);
  });
  /*
  	负责向服务器发送异步请求，并且将服务器返回的股票信息（json字符串的形式)读出来，然后更新表格
  */
  function quoto(){
  	  //$.ajax方法由jQuery提供
  	  //{}是一个对象，用来控制ajax对象如何向服务器发送请求
	  $.ajax({
		  "url":"quoto.do",
		  "type":"get",
		  "dataType":"json",//服务器发送给浏览器的数据类型是json字符串
		  "success":function(data){
			  //data就是服务器返回的数据。如果是jason字符串，会自动转换成对应的javascript对象
			/*相当于
			  xhr.onreadystatechange=function(){
	    		if(xhr.readyState==4 && xhr.status==200){
	    		} }*/
	    		$('#tb1').empty();//清空
	    		for(i=0;i<data.length;i++){
	    			var s=data[i];
	    			$('#tb1').append(
	    				'<tr><td>'+s.code+'</td>'
	    				+'<td>'+s.name+'</td>'
	    				+'<td>'+s.price+'</td>'
	    				+'</tr>');
	    		}
		  },
		  "error":function(){//服务器异常时,处理服务器返回的数据
			  
		  }
	  });
  }
</script>
<style>
  #d1{
    width:450px;
    height:360px;
    margin-left:40%;
    margin-top:5px;
    background-color:black;
  }
  #d2{
    height:35px;
    background-color:red;
    color:yellow;
  }
  table{
    color:white;
    font-style:italic;
    font-size:24px;
  }
</style>
</head>
<body style="font-size:30px;">
  <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>
        <tfoot></tfoot>
      </table>
    </div>
  </div>
</body>
</html>

后台模拟数据

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 com.fasterxml.jackson.databind.ObjectMapper;

import bean.Stock;

public class ActionServlet extends HttpServlet {
	@Override
	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		String uri=request.getRequestURI();
		String action=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
		System.out.println(action);
		if("/quoto".equals(action)) {
			//模拟生成几只股票的信息
			Random r=new Random();
			List<Stock> stocks=new ArrayList<Stock>();
			for(int i=0;i<8;i++) {
				Stock s=new Stock();
				s.setCode("60087"+r.nextInt(10));
				s.setName("中国嘉陵"+r.nextInt(10));
				s.setPrice(r.nextInt(500));
				stocks.add(s);
			}
			ObjectMapper om=new ObjectMapper();
			String json=om.writeValueAsString(stocks);
			out.println(json);
			System.out.println(json);
			
		}else if("/getNumber".equals(action)) {
			Random r=new Random();
			int number=r.nextInt(10000);
			System.out.println("number:"+number);
//			ObjectMapper om=new ObjectMapper();
//			String jsonum=om.writeValueAsString(number);
//			out.println(jsonum);
			out.println(number);
		}else if("/saveInfo".equals(action)) {
			String name=request.getParameter("name");
			String phone=request.getParameter("phone");
			String address=request.getParameter("address");
			System.out.println("name:"+name+",phone:"+phone+",address:"+address);
			out.print("保存送货信息成功！");
		}
	}

}