前端jsp与后端servlet传值(java web)

简介: jsp中js使用jQuery封装好的 $.ajax()方法与服务器进行交互 var jsonStick = this.strtoJson(); $.

jsp中js使用jQuery封装好的 $.ajax()方法与服务器进行交互

  var jsonStick = this.strtoJson();
  $.ajax({
                type : 'post',//不起作用 要用jsonP
                url : 'controllerServlet',//要传输数据对象的地址
                contentType : "application/x-www-form-urlencoded",//转化为form表单传值
                data : {
                    "js" : jsonStick
                }, //前面的js是服务端获取的ID 后面的jsonStick是处理后的json对象
                cache : false,
                dataType : 'text',//这个关系到你能不能正确接收到servlet 响应的数据
                async : false, //因为ajax默认是异步调用的,所以得到的返回值是空值,要得到值必须改成同步:async: false
                success : function(data) {
                    //console.log(data);
                    flag = data; //采用全局变量flag接收数据(data未作处理)
                },
                error : function(msg) { //ajax请求失败后触发的方法
                    //弹出错误信息
                    console.log(msg);
                }
            });
  //数据处理函数
  function() {
            //'':this.note.name,
            var arr = [];
            var json = {};
            json.note_id = this.id
            json.note = this.text;
            json.left = this.left;
            json.top = this.top;
            json.zindex = this.zIndex;
            if (this.sqlId == null) {
                this.sqlId = 0;
            }
            json.sqlId = this.sqlId;
            arr.push(json);
            var jsonStick = JSON.stringify(arr);//格式化json数据
            return jsonStick;
        }

servlet接收 处理 响应

protected void doGet(.........){
  String js = request.getParameter("js");//接收jsp传过来的数据
  JSONArray json = JSONArray.fromObject(js);//对数据进行数组转化
  JSONObject jsonOne = json.getJSONObject(0);//获取确定的json对象
  boolean flag = true;
  PrintWriter out = response.getWriter();
  out.print(flag);//将flag传给jsp
  out.close();
}

jsp接收响应 并对数据进行处理

  $.ajax({
            type : 'post',
            url : 'sendServlet',
            cache : false,
            dataType : 'json',
            async : false, //因为ajax默认是异步调用的,所以得到的返回值是空值,要得到值必须改成同步:async: false
            success : function(data) {
                //console.log(data.result.note)
                for (var i in data) {

                    console.log(data[i])
                    note = new Note();
                    note.id = data[i].note_id;
                    note.text = data[i].note;
                    note.timestamp = new Date().getTime();
                    note.left = data[i].left;
                    note.top = data[i].top;
                    note.zIndex = data[i].zindex;


                }
            },
            error : function(msg) { //ajax请求失败后触发的方法
                //弹出错误信息
                console.log(msg);
            }
        });

中间用到的jar包以及js

https://pan.baidu.com/s/1XEOkM1as_10I92WAzooBuA
密码:gix8
目录
相关文章
|
18天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
32 3
|
15天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
17天前
|
jenkins Java 测试技术
如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例详细说明
本文介绍了如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例,详细说明了从 Jenkins 安装配置到自动构建、测试和部署的全流程。文中还提供了一个 Jenkinsfile 示例,并分享了实践经验,强调了版本控制、自动化测试等关键点的重要性。
48 3
|
19天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
18天前
|
小程序 前端开发 算法
|
19天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
1月前
|
NoSQL 安全 Java
Java后端基础自测
Java后端基础自测
60 12
|
1月前
|
jenkins Java 测试技术
如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例详细说明
【10月更文挑战第8天】本文介绍了如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例,详细说明了从 Jenkins 安装配置到自动构建、测试和部署的全流程。文中还提供了一个 Jenkinsfile 示例,并分享了实践经验,强调了版本控制、自动化测试等关键点的重要性。
35 5
|
1月前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
19 1