首页写一个页面，要求有一个搜索款和一个数据表格，当提交搜索框的内容后，根据内容更新表格数据，使用jsp和ajax技术

写一个页面，要求有一个搜索款和一个数据表格，当提交搜索框的内容后，根据内容更新表格数据，使用jsp和ajax技术

时间: 2023-05-27 07:02:33 浏览: 108

<!DOCTYPE html> <html> <head> <title>搜索页面</title> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function search() { var keyword = $("#searchInput").val(); $.ajax({ url: "search.jsp", type: "post", data: { keyword: keyword }, success: function(result) { $("#table").html(result); }, error: function(xhr) { alert("出错了：" + xhr.status + " " + xhr.statusText); } }); } </script> </head> <body> <h1>搜索页面</h1> <input type="text" id="searchInput" placeholder="输入关键字"> <input type="button" value="搜索" onclick="search()"> <table id="table">  <tr> <th>编号</th> <th>名称</th> <th>价格</th> </tr> <tr> <td>1</td> <td>苹果</td> <td>5.00</td> </tr> <tr> <td>2</td> <td>香蕉</td> <td>3.00</td> </tr> <tr> <td>3</td> <td>橙子</td> <td>4.50</td> </tr> </table> </body> </html> search.jsp: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String keyword = request.getParameter("keyword"); // 这里根据关键字查询数据库，构造表格数据 // 这里简化操作，直接返回初始表格数据 String table = "<tr><th>编号</th><th>名称</th><th>价格</th></tr>"; table += "<tr><td>1</td><td>苹果</td><td>5.00</td></tr>"; table += "<tr><td>2</td><td>香蕉</td><td>3.00</td></tr>"; table += "<tr><td>3</td><td>橙子</td><td>4.50</td></tr>"; out.print(table); %>

阅读全文