Web实验五Jquery AJAX编程

于 2023-04-23 11:37:26 发布
阅读量525 收藏 7
点赞数 1
文章标签： ajax 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74331689/article/details/130317547
版权

实验目的及要求：

  1. 理解和掌握Jquery  AJAX的get方式请求
  2. 理解和掌握Jquery  AJAX的post方式提交
  3. 理解和掌握vue axios的前后端数据交互请求

服务器接口测试地址：

http://114.67.241.121:8088/swagger-ui.html

接口使用说明：

点开“用户管理”下“用户登录”，“try it out”

输入接口参数 username:admin   password:123456。点击execute

查看返回结果，token为当前用户的身份令牌

复制身份令牌，点击页面右上角的“Authorization”，粘贴后点击按钮“Authorize”

点击“Close”关闭弹窗。

测试其他接口，输入相关参数，点击“execute”即可正常运行。

实验内容：

1、设计登录界面，输入账号、密码（测试账号：admin 密码：123456）后调用服务端Api接口进行身份验证验证。登录成功记录所返回的身份令牌，登录失败给出相应反馈提示。

  • 接口地址：http:// 114.67.241.121:8088/user/login
  • 请求方式：post
  • 接口参数

  • 返回数据

运行截图

 

 

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验五 登录界面</title>
    <style>
        #loginbox {
            width: 600px;
            height: 300px;
            margin-top: 50px;
            border: solid 1px lightseagreen;
        }
        #lable {
            width: 600px;
            height: 50px;
            text-align: center;
            font-size: 30px;
            color: deepskyblue;
            font-weight: bold;
            border-bottom: 1px solid lightseagreen;
        }
        #textbox {
            width: 400px;
            height: 170px;
            text-align: center;
            padding-top: 30px;
        }
        #username,#password {
            text-indent: 2px;
            height: 30px;
            font-size: 20px;
        }
        #btn {
            width: 80px;
            height: 30px;
            font-size: 20px;
            text-align: center;
        }
    </style>
    <script src="jQuery.js"></script>
</head>
<body>
    <center>
        <div id="loginbox">
            <div id="lable"><label>登录界面</label><br></div><br>
            <div id="textbox">
                <label for="username">账号：</label><input type="text" id="username" placeholder="username"><br><br>
                <label for="password">密码：</label><input type="password" id="password" placeholder="password"><br><br>
                <button id="btn">登录</button>
            </div>
        </div>
    </center>
</body>
<script>
    $("#btn").on("click",function(){
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            url:"http://114.67.241.121:8088/user/login",
            type:"POST",
            dataType:"json",
            data:{
                password : password,
                username : username
            },
            success:function(res) {
                if (res.code == "200") {
                    console.log(res.data);
                    localStorage.setItem("token",res.data.token);
                    alert("登录成功！");
                    window.location.href = "main.html";
                }else {
                    alert("登录失败，账号或密码错误！");
                }
            },
            error:function(jqXHR, textStatus, errorThrown) {
            }
        });
    });
</script>
</html>

2.登录成功进入学生管理界面，调用Api接口获取所有学生信息，并设计界面加载显示数据。

  • 接口地址：http:// 114.67.241.121:8088/stu/list
  • 请求方式：get
  • 请求头：

header请求头携带变量：Authorization

header请求头携带变量的值：登录成功所记录下的token身份令牌

  • 接口参数：无
  • 返回数据

请求头未携带登录成功所返回的token

请求头中携带当前登录用户的token身份令牌

运行截图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验五 学生管理界面</title>
    <style>
        #stuInfo {
            width: 900px;
            height: auto;
        }
        #lable1 {
            width: 900px;
            height: 30px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            border-bottom: 1px solid black;
            margin-bottom: 20px;
        }
        #lable2 {
            width: 900px;
            height: 30px;
            text-align: center;
            padding-top: 5px;
            font-size: 20px;
            font-weight: bold;
        }
        table {
            width: 900px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        th {
            border: 1px solid black;
        }
        td {
            border: 1px solid black;
            text-align: center;
        }
        #operation {
            width: 900px;
            height: 100px;
            padding-top: 15px;
            border: 1px solid black;
        }
        #addbtn,#update,#delete{
            width: 100px;
            height: 25px;
            font-size: 18px;
            text-align: center;
        }
    </style>
    <script src="jQuery.js"></script>
</head>
<body>
    <center>
        <div id="operation">
            <div id="lable1"><label for="">操作</label></div>
            <input type="button" value="添加学生" id="addbtn">     
            <input type="button" value="修改学生" id="update">     
            <input type="button" value="删除学生" id="delete">
        </div>
        <div id="stuInfo">
            <div id="lable2"><label for="">学生信息</label></div>
            <table id="stuTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>专业</th>
                        <th>性别</th>
                        <th>年级</th>
                        <th>电话</th>
                        <th>地址</th>
                        <th>出生地</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </center>
</body>
<script>
    $(document).ready(function(){
        $.ajax({
            url:"http://114.67.241.121:8088/stu/list",
            type:"GET",
            dataType:"json",
            headers: {
                Authorization:localStorage.getItem("token"),
            },
            success: function(res) {
                console.log(res);
                var stuList = res.data;
                    var tableBody = $('#stuTable tbody');
                    for(var i = 0;i<stuList.length;i++) {
                        var student = stuList[i];
                        var tableRow = $('<tr>')
                            .append($('<td>').text(student.stuid))
                            .append($('<td>').text(student.stuno))
                            .append($('<td>').text(student.stuname))
                            .append($('<td>').text(student.stumajor))
                            .append($('<td>').text(student.stugender))
                            .append($('<td>').text(student.stugrade))
                            .append($('<td>').text(student.stuphone))
                            .append($('<td>').text(student.stuaddess))
                            .append($('<td>').text(student.stunative));
                        tableBody.append(tableRow);
                    }
            },
            error: function(jqXHR) {
                console.log("发生错误：" + jqXHR.status + " " + jqXHR.statusText);
            }
        });
    });
    $("#addbtn").click(function() {
        window.location.href = "add.html";
    });
    $("#update").click(function() {
        window.location.href = "update.html";
    });
    $("#delete").click(function() {
        window.location.href = "delete.html";
    })
</script>
</html>

3.点击“添加”按钮进入添加界面，完成相关信息输入后，调用Api接口保存数据信息。

  • 接口地址：http:// 114.67.241.121:8088/stu/add
  • 请求方式：post
  • 请求头

header请求头携带变量：Authorization

header请求头携带变量的值：登录成功所记录下的token身份令牌

  • 接口参数 

  • 返回结果

运行截图

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加界面</title>
    <script src="jQuery.js"></script>
    <style>
        #lable {
            width: 600px;
            height: 30px;
            margin-top: 30px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }
        #box {
            padding-top: 20px;
            padding-bottom: 30px;
            width: 600px;
            height: auto;
            border: 1px solid black;
        }
        #submit {
            width: 80px;
            height: auto;
        }
    </style>
</head>
<body>
    <center>
        <div id="lable"><label for="">添加学生</label><br><br></div>
        <div id="box">
            <label for="">ID : </label><input type="text" id="stuid"><br><br>
            <label for="">学号 : </label><input type="text" id="stuno"><br><br>
            <label for="">姓名 : </label><input type="text" id="stuname"><br><br>
            <label for="">专业 : </label><input type="text" id="stumajor"><br><br>
            <label for="">性别 : </label><input type="text" id="stugender"><br><br>
            <label for="">年级 : </label><input type="text" id="stugrade"><br><br>
            <label for="">电话 : </label><input type="text" id="stuphone"><br><br>
            <label for="">地址 : </label><input type="text" id="stuaddess"><br><br>
            <label for="">出生地 : </label><input type="text" id="stunative"><br><br><br>
            <input type="button" name="" id="submit" value="提交">
        </div>
    </center>
</body>
<script>
    $("#submit").click(function() {
        $.ajax({
            url:"http://114.67.241.121:8088/stu/add",
            type:"POST",
            contentType: 'application/json',
            headers:{
                Authorization:localStorage.getItem("token"),
            },
            data:JSON.stringify({
                    "stuaddess":$("#stuaddess").val(),
                    "stugender": $("#stugender").val(),
                    "stugrade": $("#stugrade").val(),
                    "stuid": $("#stuid").val(),
                    "stumajor": $("#stumajor").val(),
                    "stuname": $("#stuname").val(),
                    "stunative":$("#stunative").val(),
                    "stuno": $("#stuno").val(),
                    "stuphone":$("#stuphone").val(),
            }),
            success:function(res){
                console.log(res);
                alert("添加成功！");
                window.location.href = "main.html";
            },
            error:function(jqXHR, textStatus, errorThrown) {
            }
        });
    });
</script>
</html>

4.点击“修改”按钮进入修改界面，读取当前学生信息，输入修改后数据后保存完成数据信息更新。

  • 接口地址：http:// 114.67.241.121:8088/stu/edit
  • 请求方式：post
  • 请求头

header请求头携带变量：Authorization

header请求头携带变量的值：登录成功所记录下的token身份令牌

  • 接口参数

  • 返回结果

运行截图

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改界面</title>
    <style>
        #lable {
            width: 600px;
            height: 30px;
            margin-top: 30px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }
        #box {
            padding-top: 20px;
            padding-bottom: 30px;
            width: 600px;
            height: auto;
            border: 1px solid black;
        }
        #submit {
            width: 80px;
            height: auto;
        }
    </style>
    <script src="jQuery.js"></script>
</head>
<body>
    <center>
        <div id="lable"><label for="">修改学生信息</label></div>
        <div id="box">
            <label for="">ID : </label><input type="text" id="stuid"><br><br>
            <label for="">学号 : </label><input type="text" id="stuno"><br><br>
            <label for="">姓名 : </label><input type="text" id="stuname"><br><br>
            <label for="">专业 : </label><input type="text" id="stumajor"><br><br>
            <label for="">性别 : </label><input type="text" id="stugender"><br><br>
            <label for="">年级 : </label><input type="text" id="stugrade"><br><br>
            <label for="">电话 : </label><input type="text" id="stuphone"><br><br>
            <label for="">地址 : </label><input type="text" id="stuaddess"><br><br>
            <label for="">出生地 : </label><input type="text" id="stunative"><br><br><br>
            <input type="button" name="" id="submit" value="提交">
        </div>
    </center>
</body>
<script>
    $("#submit").click(function() {
        $.ajax({
            url:"http://114.67.241.121:8088/stu/edit",
            type:"POST",
            contentType: 'application/json',
            headers:{
                Authorization:localStorage.getItem("token"),
            },
            data:JSON.stringify({
                    "stuaddess":$("#stuaddess").val(),
                    "stugender": $("#stugender").val(),
                    "stugrade": $("#stugrade").val(),
                    "stuid": $("#stuid").val(),
                    "stumajor": $("#stumajor").val(),
                    "stuname": $("#stuname").val(),
                    "stunative":$("#stunative").val(),
                    "stuno": $("#stuno").val(),
                    "stuphone":$("#stuphone").val(),
            }),
            success:function(res){
                console.log(res);
                alert("修改成功！");
                window.location.href = "main.html";
            },
            error:function(jqXHR, textStatus, errorThrown) {
            }
        });
    });
</script>
</html>

5.点击“删除”按钮请求服务端删除数据接口，在服务端数据成功删除后，移除表格中数据行。

  • 接口地址：http:// 114.67.241.121:8088/stu/del
  • 请求方式：Post
  • 请求头

header请求头携带变量：Authorization

header请求头携带变量的值：登录成功所记录下的token身份令牌

  • 接口参数

  • 返回结果

 

运行截图  

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除学生</title>
    <style>
        #lable {
            width: 600px;
            height: 30px;
            margin-top: 30px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }
        #box {
            padding-top: 20px;
            padding-bottom: 30px;
            width: 600px;
            height: auto;
            border: 1px solid black;
        }
        #submit {
            width: 80px;
            height: auto;
        }
    </style>
    <script src="jQuery.js"></script>
</head>
<body>
    <center>
        <div id="lable"><label for="lable" id="lable">删除学生信息</label></div>
        <div id="box">
            <label for="lable">ID : </label><input type="text" id="stuid"><br><br>
            <input type="button" name="" id="submit" value="提交">
        </div>
        </div>
    </center>
</body>
<script>
    $("#submit").click(function(){
        $.ajax({
            url:"http://114.67.241.121:8088/stu/del?stuid="+Number($("#stuid").val()),
            type:"POST",
            contentType: 'application/json;charset=UTF-8',
            headers:{
                Authorization:localStorage.getItem("token"),
            },
            // data:JSON.stringify({
            //         "stuid": Number($("#stuid").val()),
            // }),
            success:function(res){
                console.log(res);
                alert("删除成功！");
                window.location.href = "main.html";
            },
            error:function(jqXHR, textStatus, errorThrown) {
            }
        })
    });
</script>
</html>
泰库拉
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQueryAjax总结
qq_43773083的博客
11-10 238
一、发送get请求 get() <form id="myForm"> 姓名：<input type="text" name="name"> 信息：<input type="text" name="message"> </form> <button id="btn00">get&l...
JQuery（25）_JQuery 的 Ajax 练习
魏宇轩
12-14 452
本系列博客汇总在这里：JQuery 汇总 JQuery 的 Ajax题目要求一、前端页面二、后台 servlet三、web.xml 配置文件四、效果演示 题目要求 可以不使用数据库，使用 Jquery Ajax 模拟用户名校验，可使用的 JSON 工具包。 一、前端页面 <%@ page language="java" contentType="text/html; charset=UTF...
jQuery和ajax案例练习
m0_46467017的博客
03-03 1437
可以通过jQuery的last()和html()方法来实现。last()方法返回匹配元素集合中的最后一个元素，html()方法用于获取或设置元素的HTML内容。// li.remove() 删除li标签 }) });
js jquery ajax练习3
ATCG7的博客
04-27 157
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
ajax实训,ajax实践
weixin_33915387的博客
08-06 249
1.ajax 是什么？有什么作用？含义：AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。作用：实现网页的异步加载，局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。2.前...
jQuery Ajax调用Web服务代码
12-26
在IT领域，jQuery、Ajax和Web服务是三个关键概念，它们在构建动态和交互式的Web应用程序中发挥着重要作用。本文将深入探讨jQuery的Ajax功能以及如何利用它来调用Web服务。 首先，jQuery是一个轻量级的JavaScript库...
jQuery AJAX XMLHttpRequest对象PPT
04-27
$.ajax()函数允许自定义各种选项，如数据类型、请求头、回调函数等，使得AJAX编程更加简洁和高效。 总结来说，XMLHttpRequest对象是前端开发中不可或缺的一部分，它为网页动态更新和与服务器的异步交互提供了可能。...
利用Ajax+Jquery实现异步进度条效果
05-30
"利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开，它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先，C#是一种面向对象的编程语言，广泛应用于...
jquery、ajax学习电子书.zip
07-25
《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书，旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库，它极大地简化了DOM...
Jquery AJAX 框架的使用方法
10-29
总之，jQuery通过提供一套统一的API，降低了JavaScript编程的复杂性，提高了开发效率，是Web开发中的得力工具。无论你是前端新手还是经验丰富的开发者，jQuery都能帮助你更高效地构建交互丰富的Web应用。
简单测试接口是否支持跨域
01-02
检查接口是否支持跨域请求，一个简单的ajax请求测试方法
AJAX网站设计实训
01-16
AJAX网站设计实训AJAX网站设计实训AJAX网站设计实训AJAX网站设计实训
ajax接口
Blue54的博客
03-10 112
json方式：（不要json方式就去掉contentType就行）
Ajax入门（三种方法、postman接口测试、form表单、模板引擎）
m0_59592734的博客
05-19 984
Ajax URL地址叫统一资源定位符，用于标识互联网每个资源存放的地址； 组成： 1.客户端和服务器之间的通信协议 2.存放该资源的服务器名称 3.资源在服务器中的具体存放位置 客户端：打开浏览器；输入需要访问的网址；回车向服务端发送请求； 服务端：接受来自客户端的请求；在内部处理这次请求，找到相关资源；响应发送给客户端 过程:请求——处理——响应 网页中的常见资源： 文字、视频、图片等网页中的数据也是资源；数据是网页的灵魂 网页请求数据：如果在网页中请求服务器上的数据资源，需要用到X
Ajax在console进行接口调试
徒手千行代码无bug
12-18 1876
$.ajax({ url: “http://localhost:8999/ae-server/testConnection”, type: “POST”, data: {}, dataType: “json”, async: false, success: function (result) { console.log(“SUCCESS！”); } })
ajax的常用api测试
IT_Mr_wu的博客
11-09 1541
ajax的常用api测试 AjaxApi 下面列出的接口基本都是可以直接使用的，如有问题记得告诉我哦 支持的请求方法 GET（SELECT）：从服务器取出资源（一项或多项）。 POST（CREATE）：在服务器新建一个资源。 PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。 PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。 DELETE（DELE...
Ajax 和 axios 调用接口的使用
m0_61663332的博客
12-28 1579
Ajax 和 axios 调用接口的使用测试GET：1. 选择请求方式，2. 填写URL地址，3. 填写参数，4. 点击Send发送，5. 查看响应结果 测试POST：1. 选择请求方式，2. 填写URL地址，3. 选择body面板勾选数据格式x-www，4. 填写发送数据，4. 点击Send发送，5. 查看响应结果 场景：用户名检测 / 搜索提示 / 数据分页显示(跳转不刷新页面) / 数据的增删改查
用JQuery实现标签添加
反手一个bug的博客
11-18 756
&amp;lt;label for=&quot;tag&quot; style=&quot;font-size:20px;&quot;&amp;gt;标签&amp;lt;/label&amp;gt; &amp;lt;input id=&quot;tag&quot; type=&quot;text&quot; name=&quot;tag&quot; class=&quot;for
ajax学习心得（1）
石林在HAYS搬砖。
07-28 678
最近手头穷了。需要一点点资金供自己吃喝拉撒。接了一个项目中间需要使用到ajax实现推送的功能。类似于校内的留言功能。 当用户A给用户B留言，如果用户B在线就能直接弹出一个提示，然后两人就可以进行即时通信。 翻阅资料，实现推送的功能主要有两种技术，一种是servlet3.0 不过需要tomcat7.0的支持，鉴于中国各大服务器运营商对于tomcat7.0的支持情况，只好选择另外一种方案，使用aj
WEB1111111111
最新发布
04-23
WEB1111111111

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值