ajax应用（json-server）

最近作业中有个让我们制作相关的学生信息的获取、添加、删除等等操作，找了网上，没找到这样的源码，写的途中遇到了不少的问题（还是要多实践诶，不然自己学的太杂了，就会写得很混乱www）=>欢迎大佬指正错误！

---

以下附上源码，新人写码勿喷- -

json文件

（调用表的时候，用json-server时候，三张表合并也很头疼，网上我也没有看见实际的例子=.=）

{
  "students": [
    {
      "id": 1,
      "name": "张三",
      "gender": "男",
      "birthday": "1999-05-23",
      "address": "北京市海淀区",
      "email": "zhangsan@example.com",
      "phone": "13333333333"
    },
    {
      "id": 2,
      "name": "李四",
      "gender": "女",
      "birthday": "1998-09-12",
      "address": "北京市朝阳区",
      "email": "lisi@example.com",
      "phone": "15555555555"
    },
    {
      "id": 3,
      "name": "王五",
      "gender": "男",
      "birthday": "2000-01-01",
      "address": "北京市东城区",
      "email": "wangwu@example.com",
      "phone": "17777777777"
    }
  ],
  "courses": [
    {
      "id": 1,
      "name": "计算机基础",
      "credit": 4
    },
    {
      "id": 2,
      "name": "高等数学",
      "credit": 5
    },
    {
      "id": 3,
      "name": "数据库系统",
      "credit": 3
    }
  ],
  "enrollments": [
    {
      "id": 2,
      "studentId": 1,
      "courseId": 2,
      "grade": "A"
    },
    {
      "studentId": 1,
      "courseId": 1,
      "grade": "A+",
      "id": 3
    }
  ]
}

html片段

（最开始写的时候发现数据会出现在页面上，但几秒后数据就消失不见了，研究了好久，结果发现是button的原因，后面改成用input就数据就没有消失了嗷）

    <form action="">
      <table>
        学生：<input type="text" id="studentId" />
        课程：<input type="text" id="courseId" />
        成绩：<input type="text" id="grade" />
        <input type="button" id="btn1" onclick="add()" value="增加" />
        <input type="button" id="btn2" onclick="show()" value="查询" />
      </table>
      <table>
        <thead>
          <tr>
            <th>报名ID</th>
            <th>学生姓名</th>
            <th>课程名称</th>
            <th>学分</th>
            <th>成绩</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="test"></tbody>
      </table>
    </form>

 script部分

（有些可能用得比较杂，思路不是很清晰，通常是想这个用一下，想那个用一下诶，不过功能最终实现了，还是要多写写！）

$(function(){
       show();
      })
        function add(){
        var studentId= $("#studentId").val();
        var courseId = $("#courseId").val();
        var grade = $("#grade").val();
        $.ajax({
          url:"http://localhost:3000/enrollments?_expand=student&_expand=course",
          dataType:"json",
          type:"post",
          data: {
            studentId: studentId,
            courseId: courseId,
            grade: grade,
          },
          success:function(data){
            alert("添加成功");
            show();
          },
        })
      }
      function show(){
        // var studentId= $("#studentId").val();
        // var courseId = $("#courseId").val();
        // var grade = $("#grade").val();
        $.ajax({
          dataType: "json",
          url: " http://localhost:3000/enrollments?_expand=student&_expand=course",
          type: "get",
          // data: {
          //   studentId: studentId,
          //   courseId: courseId,
          //   grade: grade,
          // },
          success: function (res) {
            var str = "";
            for (i in res) {
              str +=
                "<tr>" +
                "<td>" +
                res[i].id +
                "</td>" +
                "<td>" +
                res[i].student.name +
                "</td>" +
                "<td>" +
                res[i].course.name +
                "</td>" +
                "<td>" +
                res[i].course.credit +
                "</td>" +
                "<td>" +
                res[i].grade +
                "</td>" +
                "<td>" +
                "<input type='button' value='删除' id='delete' onclick='DeletePost("+res[i].id+")'>" +
                "</td>" +
                "</tr>";
            }
            // console.log("object :>> ", res);
            $("#test").html(str);
          },
          error: function () {
            alert("出错啦");
          },
        });
      }

      function DeletePost(obj){
        $.ajax({
          url:"http://localhost:3000/enrollments/"+obj,
          dataType:"json",
          type:"delete",
          success:function(data){
            alert("删除成功");
            show();
          }
        })
      }

实现截图