我的第一个javaweb小项目

27 阅读3分钟

问题1

如何获取表单中的所有数据?

当时我想直接获取表单的项目而不是一一去获取然后提出的这个问题

问题2

object.key是什么东西

这是一个将我们的对象的属性,转化成我们的数组中的下表;它是js中的内置的一个方法

问题3

如何把一个字符串变成一个int类型的值 前面的内容忘记的太快了

问题4

let studentTbody=studentTbody = ("#studentTable > tbody"); $()是jquery的选择器,#studentTable > tbody选取studentTable里面的tbody元素

问题5

我的ajax中type:get;这里的get要加上一个"";

问题6

我的ajax里面好像出现了一个叫做循环引用的东西,具体是什么东西我也不清楚了

问题7

const form = document.getElementById('addForm'); const elements = form.elements;我当时想用这个来把我们表单里面的元素全部都提取出来,然而我不会用这些东西所以导致我的这个一直不对

问题8

$(function () {
          $.ajax({
              type:"get",
              data:formData,
              dataType:"json",
              url:"addStudent",
              success:function (reqs) {
                  console.log("执行我们成功的函数")
                  let $tr = $("<tr></tr>");
                  $tr.append($("<td>" + formData.id + "</td>"));
                  $tr.append($("<td>" + formData.name + "</td>"));
                  $tr.append($("<td>" + formData.gender + "</td>"));
                  $tr.append($("<td>" + formData.age + "</td>"));
                  $tr.append($("<td>" + formData.major + "</td>"));
                  let $td = $("<td><td>");
                  $td.append(
                      $('<button>')
                          .addClass('btn btn-primary')
                          .text('编辑')
                          .on('click', function() {
                              openEditModal(formData.id, formData.name, formData.gender, formData.age, formData.major);
                          }),
                      ' ', // 添加按钮间的空格
                      $('<button>')
                          .addClass('btn btn-danger')
                          .text('删除')
                          .on('click', function() {
                              deleteStudent(formData.id);
                          })
                  );
              }
          })
      })为什么我的成功代码不会执行

把ajax所有的东西都写对,有对应的servlet,传入的参数没有失误那么就可以执行了;

问题9

这个里面的this是指什么东西

function deleteStudent(id) {
        if (confirm('确定要删除这个学生吗?')) {
            // AJAX 调用删除学生
            this
        }
    }这个里面的this是值什么东西

这个里面的this就是我们点击的那个按钮

问题10

如何删除我们动态存在的jqDOM元素 (使用事件委托); 首先记录我们要删除的dom(或者和他紧密相关的dom),然后执行remove,我的删除是用的点击的按钮this然后找到它的父辈的tr,然后执行删除;

事件委托的选择器过滤机制: 当你使用事件委托时,只有匹配指定选择器的元素才会触发处理函数。这就是事件委托既能处理动态元素又能精确控制响应的关键。

问题11

const row = $().data('id', student.id);这个是什么东西

我们的data是jQuery的一种存储, 将学生的ID存储在这个jQuery对象的数据缓存中,我们的data存储的东西不会直接显示在我们的dom对象当中,所以我们的$()不可以通过属性来获取我们的存储了某个东西的DOM;

三种存储方式的对比

方法存储位置是否可见于DOM特点
.data('id', value)jQuery数据缓存不可见内存存储,不污染DOM
.attr('data-id')DOM属性可见会修改HTML属性
HTML5 datasetDOM属性可见标准方式,但较冗长

问题12

success:function (reqs) 这个里面的reqs可以改成别的字母吗 可以

问题13

我们的.text(student.major)这样的是存储在我们的html中对吗 直接展示在我们的html中,在dom树上;

问题14

/ 更好的方式:存储完整学生对象
let $tr = $("<tr>").data("student", {
    id: student.id,
    name: student.name,
    gender: student.gender,
    age: student.age,
    major: student.major
});

// 显示文本(与存储分开)
$tr.append(
    $("<td>").text(student.id),
    $("<td>").text(student.name),
    // ...
);

// 后续任何时候都可以获取完整数据
const studentData = $tr.data('student');这个student.id中的student是我们的data存储的student吗

我们前面的那个student的作用仅仅是完成我们整个元素的初始化,我们data里面存储的那个student的作用是用来进行逻辑上的操作

  • 原始对象:用于初始化
  • 存储的数据:用于后续操作(因为原始对象可能已不可用)

问题 14

这个更新如何获取我们要更新的tr dom 就是想办法获取到我们的tr的dom,需要用到tr的唯一的标识符来定位到我们要去更新的tr

问题15

currentEditingRow = (`#studentTable tr[data-student-id="{id}"]`);这个是什么意思 这个就涉及到了我说的那个data存储的数据不会再dom中显示的问题,我们无法得到我们的那个tr导致我的所有的数据一直是空,然后后端一直报错

问题16

为什么我的$(id)无法解析,原因是我们的这个是一个el表达式,我们没有从后端获取到什么东西

问题17

function updateStudent() {
        //点击编辑 -> 修改我们的数据-> 点击更新 -> 现在是点击更新后的数据
        const formData = {
            name: $("#editForm input[name='name']").val(),
            gender: $("#editForm select[name='gender']").val(),
            age: $("#editForm input[name='age']").val(),
            major: $("#editForm input[name='major']").val(),
            id:$willUpdateRow.data("student-id")
        };
        console.log(formData)
        // AJAX 调用更新学生
        $.ajax({
            url:"updateStudent",
            type:"post",
            date:formData,
            dataTypes:"json",
            contentType: "application/json",
            success:function (student) {

                //修改我们tr元素中td元素的值
                $willUpdateRow.find("td:eq(1)").text(formData.name);
                $willUpdateRow.find("td:eq(2)").text(formData.gender);
                $willUpdateRow.find("td:eq(3)").text(formData.age);
                $willUpdateRow.find("td:eq(4)").text(formData.major);

                //更改我们的data
                $willUpdateRow.data("student", student);
                closeEditModal();
            },

        })
        //获取我们的tr的元素

        //获取我们修改后的值

        $("#editForm")
    }
还是上面的那个报错方式

这个问题最逆天了我的ajax错了一堆;

问题18

昨天我改了大半天就是改一个东西那就是我的选择器中只能获取dom元素中显示的东西,导致我一直没有搞对;