JavaWeb 第7章 JQuery 的 Ajax 交互扩展 任务2:通过 Ajax 请求直接加载新闻和主题页面

JavaWeb 应用设计及实战 目录

上一章   下一章

上一个任务/上一节       下一个任务/下一节

目录

7.2.1   在 Ajax 请求中返回 HTML 格式内容

       示例4

                 注意

       示例 5 

       示例 6 

                  注意

       技能训练

     上机练习 3 ——在 Ajax   中直接返回 HTML 内容生成主题管理页面

7.2.2   .load() 方法

              表 7-4 .load() 方法的常用参数

示例 7 

     知识扩展

    技能训练

    上机练习4——使用 .load() 方法为管理员页面加载服务器生成的主题列表


7.2.1   在 Ajax 请求中返回 HTML 格式内容

      在前面介绍的 Ajax 实现中,复杂结构的响应数据由服务器通过 JSON 格式发送,

客户端接收后再经过 JavaScript 提取数据并构建 HTML 文档结构进行展示。

      除此之外,服务器端还可以直接产生 HTML 格式的响应结果,客户端则可以将

响应结果直接套用在现有页面中。下面任以加载管理员页面的新闻列表为列展示此种

实现方式,供大家了解。了解两种响应格式的区别请扫描二维码。

  加载 HTML 内容

    首先修改管理员页面通过 Ajax 获取新闻列表的 JavaScript 脚本,如示例 4 所示。

   示例4

$(document).ready(function()){
    function initNews(){//使用 Ajax 技术获取新闻列表数据
        $.ajax({
            "url"          :"../util/news",
            "type"         :"GET",
            "data"         :"opr = listHtml",
            "dataType"     :"html",
            "success"      :"processNewsList",
        });
    }
    function processNewsList(data){//展示新闻列表
        $("#opt_area>ul").html(data);
    }
    ……//省略其他代码
});

       注意

              在回调方法 procssNewsList() 中,没有对响应结果 data 做任何处理,而是将

       其直接设置成列表的内容。

    调整 NewsServlet 中的相关功能实现,以 HTML 元素的格式构建响应内容,如示例

5 所示。

     示例 5 

……//省略其他代码
else if("listHtml".equals(opr)){//编辑新闻时对新闻的查找
    List<News> list = newsService.findAllNews();
    News news = null;
    StringBuffer newsList = new StringBuffer("");
    for(int i =0;i<list.size();){
        news = list.get(i);
        newsList.append("<li>"+news.g
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的JavaWeb项目的MVC模式进行后端管理员RSA加密登录的具体代码实现。这个示例使用MySQL数据库,利用layUI框架和ajax接口请求。 1. Model 创建一个JavaBean类,用于存储管理员信息。 ``` public class Admin { private int id; private String username; private String password; private String publicKey; private String privateKey; // 省略getter和setter方法 } ``` 2. Controller 创建一个Servlet类,用于处理管理员登录请求。 ``` public class AdminLoginController extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取用户名和密码 String username = request.getParameter("username"); String password = request.getParameter("password"); // 从数据库获取管理员信息 AdminDao adminDao = new AdminDao(); Admin admin = adminDao.getAdminByUsername(username); // 如果没有找到该管理员,返回错误信息 if (admin == null) { response.getWriter().write("error"); return; } // 生成RSA公私钥对 RSA rsa = new RSA(); admin.setPublicKey(rsa.getPublicKeyBase64()); admin.setPrivateKey(rsa.getPrivateKeyBase64()); // 保存公私钥对到数据库 adminDao.updateAdmin(admin); // 使用RSA加密密码 String encryptedPassword = rsa.encryptBase64(password); // 比较加密后的密码和数据库的密码 if (!encryptedPassword.equals(admin.getPassword())) { response.getWriter().write("error"); return; } // 登录成功,保存管理员信息到session HttpSession session = request.getSession(); session.setAttribute("admin", admin); // 返回成功信息 response.getWriter().write("success"); } } ``` 3. View 使用layUI框架创建登录页面。 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>管理员登录</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md6 layui-col-md-offset3"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="login">登录</button> </div> </div> </form> </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use(['form', 'layer'], function(){ var form = layui.form; var layer = layui.layer; // 监听登录表单提交 form.on('submit(login)', function(data){ // 发送ajax请求 $.ajax({ url: 'AdminLoginController', type: 'POST', data: data.field, success: function(result) { // 登录成功,跳转到管理页面 if (result == 'success') { window.location.href = 'admin.jsp'; } else { // 登录失败,显示错误信息 layer.msg('用户名或密码错误', {icon: 5}); } }, error: function() { layer.msg('登录失败,请重试', {icon: 5}); } }); return false; }); }); </script> </body> </html> ``` 4. DAO 创建一个DAO类,用于与数据库交互。 ``` public class AdminDao { // 数据库连接信息 private String jdbcUrl = "jdbc:mysql://localhost:3306/javaweb"; private String jdbcUsername = "root"; private String jdbcPassword = "root"; // 获取管理员信息 public Admin getAdminByUsername(String username) { String sql = "SELECT * FROM admin WHERE username = ?"; try (Connection conn = DriverManager.getConnection(jdbcUrl, jdbcUsername, jdbcPassword); PreparedStatement stmt = conn.prepareStatement(sql)) { stmt.setString(1, username); try (ResultSet rs = stmt.executeQuery()) { if (rs.next()) { Admin admin = new Admin(); admin.setId(rs.getInt("id")); admin.setUsername(rs.getString("username")); admin.setPassword(rs.getString("password")); admin.setPublicKey(rs.getString("public_key")); admin.setPrivateKey(rs.getString("private_key")); return admin; } } } catch (SQLException ex) { ex.printStackTrace(); } return null; } // 更新管理员信息 public void updateAdmin(Admin admin) { String sql = "UPDATE admin SET public_key = ?, private_key = ?, password = ? WHERE id = ?"; try (Connection conn = DriverManager.getConnection(jdbcUrl, jdbcUsername, jdbcPassword); PreparedStatement stmt = conn.prepareStatement(sql)) { stmt.setString(1, admin.getPublicKey()); stmt.setString(2, admin.getPrivateKey()); stmt.setString(3, admin.getPassword()); stmt.setInt(4, admin.getId()); stmt.executeUpdate(); } catch (SQLException ex) { ex.printStackTrace(); } } } ``` 注意:为了保证安全性,RSA公私钥对应该定时更新,这里没有实现定时更新的代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值