Ajax异步的增删改查 :下拉没写

最新推荐文章于 2024-07-16 20:32:10 发布

不许人间有白头

最新推荐文章于 2024-07-16 20:32:10 发布

阅读量420

点赞数

分类专栏： ajax 文章标签： ajax jsp jquery java html

本文链接：https://blog.csdn.net/nnnnnnnnnnii/article/details/107618391

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JSP异步:新增和删除都写在select.jsp页面

<%@ page contentType=“text/html;charset=UTF-8” language=“java” isELIgnored=“false” %>必须配值

<%–不写isELIgnored 前台获取不到json数据只能是 ${param.id}–%>

需要导入src/main/webapp/js/jquery-3.3.1.js 架包

select.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--1.引入jqery--%>
    <script  src="../js/jquery-3.3.1.js"></script>

    <%--
        2.异步请求
    --%>

    <script type="text/javascript">

        $(function () { // 当界面在在完成之后再去请求

            $.ajax({
                url:'../findAllStudent', // ../ 返回上一级 目的是返回到应用的上下文路径 就是application
                type:'get',// 网络请求方式
                dataType:'json', // 要求将后台服务返回的 数据转化为json
                success:function (data) {

                   for (var i=0;i<data.length;i++){
                       var student = data[i];

                       var requestData = 'id='+student.id+'&name='+student.name+'&sex='+student.sex
                           +"&age="+student.age+'&height='+student.height

                       var row = '<tr>\n' +
                           '        <td>'+student.id+'</td>\n' +
                           '        <td>'+student.name+'</td>\n' +
                           '        <td>'+student.sex+'</td>\n' +
                           '        <td>'+student.age+'</td>\n' +
                           '        <td>'+student.height+'</td>\n' +
                           '        <td>'+'<a href="updateStudnet2.jsp?'+ requestData+'">更新</a>'+'</td>\n' +
                           '        <td>'+'<button οnclick="deleteStudent('+student.id+')" >删除</button>'+'</td>\n' +
                           '    </tr>\n';


                       $("#list").append(row);
                   }

                }
            })

        })

        function deleteStudent(id) {

            if (confirm("确定删除么？")){

                $.ajax({
                    url:'../deleteStudentById',
                    type:'get',
                    data:{id:id},
                    success:function (data) {

                        if (data>0){
                            alert("删除成功");
                            // 当前界面再次刷新
                            window.location.reload();
                        }else {
                            alert("删除失败");
                        }
                    }
                })
            }

        }

    </script>


</head>
<body>

JSP异步:更新

<%--不写isELIgnored  前台获取不到json数据只能是   ${param.id}--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>

    <script  src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        function updateStudent2() {

           /* $.ajax({
                url:'../updateStudent',
                type:'get',
                data:$("#studnetfrom").serialize(),
                success:function (data) {
                    alert("data:"+data);
                }
            })*/

            /*  获取form 表单并提交 第二种形式*/
            /*$.ajax({
                url:'../updateStudent',
                type:'get',
                data:{
                    id:$("#id").val(),
                    name:$("#name").val(),
                    age:$("#age").val(),
                    sex:$("#sex").val(),
                    height:$("#height").val(),
                },
                success:function (data) {
                    alert("data:"+data);
                }
            })*/


            $.get("../updateStudent",$("#studnetfrom").serialize(),function (data) {
                alert(data)
            })
        }

    </script>
</head>
<body>

<h2>更新学生信息</h2>


<form id="studnetfrom">
    <%--  ${param.id} 获取get方式的 请求参数 --%>
    id:<input type="text" id="id" name="id" value="${param.id}"><br>
    name:<input type="text" id="name" name="name" value="${param.name}"><br>
    sex:<input type="text" id="sex" name="sex" value="${param.sex}"><br>
    age:<input type="text" id="age" name="age" value="${param.age}"><br>
    height:<input type="text" id="height" name="height" value="${param.height}"><br>

    <input type="button" value="更新" onclick="updateStudent2()">
</form>


</body>
</html>

JSP异步:新增

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>


    <script  src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        function addStudent2() {
            $.get("../addStudent",$("#studnetfrom").serialize(),function (data) {
                alert("data:"+data)
            })
        }
    </script>

</head>
<body>

<h2>新增学生信息</h2>


<form id="studnetfrom">

    name:<input type="text" id="name" name="name" ><br>
    sex:<input type="text" id="sex" name="sex" ><br>
    age:<input type="text" id="age" name="age" ><br>
    height:<input type="text" id="height" name="height"><br>

    <input type="button" value="更新" onclick="addStudent2()">
</form>



</body>
</html>

不许人间有白头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax异步的增删改查 :下拉没写

JSP异步:新增和删除都写在select.jsp页面需要导入src/main/webapp/js/jquery-3.3.1.js 架包select.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %><html><head> <title>Title</title> <script s
复制链接

扫一扫