J-Zero 2013-11-28 09:47 采纳率: 0%
浏览 866

A.jsp中如何异步修改B.jsp中的元素(如:div)

业务需求:
图片剪裁功能:B.jsp页面上点击设置按钮弹出一个窗口,该窗口引用一个A.jsp页面,在A.jsp页面上将图片截取后提交,需要异步修改B.jsp页面的某处显示图片,不能使页面刷新

这个功能可以实现吗?需要怎么实现?

  • 写回答

1条回答

  • ChatGPTᴼᴾᴱᴺᴬᴵ 2023-12-08 23:10
    关注

    所有内容均由人工智能模型输出,其内容的准确性和完整性无法保证,不代表我的态度或观点。
    (通义千问专栏,v2.1.0版本)


    该回答引用通义千问大模型,仅提供参考,不保证完全正确
    这个功能是完全可以实现的。主要使用的技术就是Ajax异步请求和JavaScript来更新页面内容。


    以下是一个基本的步骤概述:

    1. 在B.jsp中,创建一个按钮触发弹出窗口,并在窗口中加载A.jsp。
    2. 在A.jsp中,使用HTML5的Canvas API或其他库(如Jcrop)进行图片剪裁操作。
    3. 当用户完成剪裁后,通过Ajax向服务器发送包含剪裁信息的请求。例如,你可以将剪裁后的图片数据转换为Base64编码的字符串或者二进制数据并通过POST方式提交到服务端。
    4. 在服务器端,接收并处理这些信息,可以将其存储在数据库中,也可以直接生成一个新的图像文件。
    5. 服务器返回一个响应,该响应通常会包含一些标识成功或失败的信息,以及可能需要的新图片的URL或者其他信息。
    6. 在A.jsp中,接收到服务器的响应后,使用JavaScript代码关闭当前弹窗。
    7. 这时回到B.jsp,在这里注册一个事件监听器,当接收到特定事件时(比如自定义的cropped-image事件),用新图片替换原来的图片。这可以通过修改B.jsp中的元素(如div)的src属性来实现。

    具体实现可能需要根据你的项目环境和技术栈来调整。下面是一些关键部分的示例代码:

    在B.jsp中:

    <!-- 弹出窗口 -->
    <button onclick="openCropWindow()">设置</button>
    
    <div id="imageDiv">
        <img src="original.jpg" alt="Original Image">
    </div>
    
    <script>
    function openCropWindow() {
        var cropWindow = window.open("A.jsp", "CropWindow", "width=800,height=600");
    }
    
    // 监听来自A.jsp的事件通知
    window.addEventListener("message", function(event) {
        if (event.data.type === "cropped-image") {
            document.getElementById("imageDiv").innerHTML = '<img src="' + event.data.url + '" alt="Cropped Image">';
        }
    }, false);
    </script>
    

    在A.jsp中:

    // 假设你已经完成了图片剪裁,现在有了剪裁后的图片数据
    var croppedImageDataURL = canvas.toDataURL();
    
    // 使用Ajax将数据发送到服务器
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/crop-image", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 处理服务器响应,假设响应中包含了新的图片URL
            var response = JSON.parse(xhr.responseText);
            var imageUrl = response.imageUrl;
    
            // 关闭当前窗口,并向父窗口发送一个消息通知它图片已剪裁
            window.opener.postMessage({ type: "cropped-image", url: imageUrl }, "*");
            window.close();
        }
    };
    xhr.send("croppedImageData=" + encodeURIComponent(croppedImageDataURL));
    

    注意:以上代码只是一个大致的示例,实际应用中可能需要处理更多细节,例如错误处理、安全问题等。

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题