javascrip矩阵计算
显示的是Null，我后端的servlet写的是将转置后的矩阵输出，在前端console.log打印控制台也没有结果
<!DOCTYPE html>
<html>
<head>
<title>Matrix Calculation</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<meta charset="UTF-8">
<title>Jquery引入</title>
<!-- <script src="js/jquery-3.3.1.min.js" type="text/javascript" ></script>-->
<script type="text/javascript">
<!-- Jquery引入的测试 -->
$(function(){
alert("执行Jquery的语法成功");
})
</script>
<script>
$(document).ready(function() {
$('#matrix-form').on('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 获取用户输入的行数和列数
var rowCount = parseInt($('#row-count').val());
var colCount = parseInt($('#col-count').val());
console.log(rowCount)
// 构建动态表格
var tableHtml = `<table>`;
for (var i = 0; i < rowCount; i++) {
tableHtml += '<tr>';
for (var j = 0; j < colCount; j++) {
$('#col-count')
tableHtml += `<td><input type="text" name="matrix[${i}][${j}]}"></td>`;
// tableHtml += '<td><input type="text" name="matrix['+i+']['+j+']"></td>';
console.log("hala")
console.log(document.getElementsByName(`matrix[${i}][${j}]`));
console.log($('input[name="matrix[' + i + '][' + j + ']"]').val());
}
tableHtml += '</tr>';
}
tableHtml += '</table>';
// 替换表格内容
$('#matrix-table').html(tableHtml);
});
$('#calculate-btn').on('click', function() {
// 发送矩阵数据到后端进行计算
var formData = $('#matrix-form').serialize();
$.ajax({
url: 'matrixServlet',
type: 'POST',
data: formData,
success: function(response) {
// 在前端展示计算结果
$('#result').html(response);
},
error: function(xhr, status, error) {
console.log('Error:', error);
}
});
});
});
</script>
</head>
<body>
<h2>Matrix Calculation</h2>
<form id="matrix-form">
<label for="row-count">行数:</label>
<input type="number" id="row-count" name="rowCount" min="1" required>
<br>
<label for="col-count">列数:</label>
<input type="number" id="col-count" name="colCount" min="1" required>
<br>
<input type="submit" value="创建表格">
</form>
<br>
<div id="matrix-table"></div>
<br>
<button id="calculate-btn">计算</button>
<br>
<div id="result"></div>
</body>
</html>
发送ajax请求到servlet按理说应该抛出空指针或者parseint异常，但是idea的控制台也没报错
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7566479
- 除此之外, 这篇博客: JavaWeb 第8章 项目实战 任务2 使用 Ajax 技术改造新闻发布系统 8.2.1 以 Ajax 方式根据主题动态加载新闻中的 （3）编写 Servlet 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
将原有的首页初始化公告拆解成两部分：按传统初始化最新消息和主题列表（如
图 8.2 所示）及采用 Ajax 方法分页加载新闻列表（如图 8.1 所示）。
图8.2 初始化最新消息和主题列表
按传统方式初始化最新消息和主题列表的关键代码如下。
……//省略其他功能 else if("topicLatest".equals(opr)){//初始化首页侧边栏和主题列表 Map<Integer,Integer>topics = new HashMap<Integer,Integer>(); topics.put(1,5); topics.put(2,5); topics.Put(5,5); List<List<News>> latests = newsService .findLatestNewsByTid(topics); //查询最新消息 List<Topic> list = topicService.findAllTopics(); //查询所有主题 request.setAttribute("list1",latests.get(0)); // 左侧国内新闻 request.setAttribute("list2",latests.get(1)); //左侧国际新闻 request.setAttribute("list3",latests.get(2)); // 左侧国际新闻 request.setAttribute("list",list); //所有的主题 request.getRequestDispatcher("/index.jsp").forward(request,response); }……//省略其他功能处理分页加载新闻列表的 Ajax 请求的关键代码如下。
else if("topicNews".equals(opr)){ //分页查询新闻 //获得主题id 和当前页数 String tid = request.getParameter("tid"); String pageIndex = request.getParameter("pageIndex"); ……//省略部分代码 Page pageObj = new page(); ……//省略部分代码 //调用业务方法查询 if(tid ==null||(tid = tid.trim()).length() ==0) newsService.findPageNews(null,pageObj); else newsService.findPageNews(Integer.valueOf(tid),pageObj); //使用 FastJSON 将 Page 对象序列化成 JSON 字符串 String newsJSON = JSON.toJSONStringWithDataFormat(pageObj, "yyyy-MM-dd HH:mm:ss", SerializerFeature.WriteMapNullValue); //向客户端返回响应数据 out.print("[{\"tid\":\""+tid+"\"},"+newsJSON +"]"); }……//省略其他功能注意
为了保证客户端分页条件的完整，响应数据时一个 JSON 数组，包括主题 id
和查询结果两部分内容。