狐鱼的随从 2023-06-11 04:45 采纳率: 33.3%
浏览 19

javascrip矩阵计算

img

img


显示的是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的控制台也没报错

img

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-06-11 08:03
    关注
    • 这个问题的回答你可以参考下: 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

         和查询结果两部分内容。

    评论

报告相同问题?

问题事件

  • 创建了问题 6月11日

悬赏问题

  • ¥20 微信小程序 canvas 问题
  • ¥15 系统 24h2 专业工作站版,浏览文件夹的图库,视频,图片之类的怎样删除?
  • ¥15 怎么把512还原为520格式
  • ¥15 MATLAB的动态模态分解出现错误,以CFX非定常模拟结果为快照
  • ¥15 求高通平台Softsim调试经验
  • ¥15 canal如何实现将mysql多张表(月表)采集入库到目标表中(一张表)?
  • ¥15 wpf ScrollViewer实现冻结左侧宽度w范围内的视图
  • ¥15 栅极驱动低侧烧毁MOSFET
  • ¥30 写segy数据时出错3
  • ¥100 linux下qt运行QCefView demo报错