javaWeb前后端传递数据交互的两种方式

Posted 2021-07-19 永旗狍子

从前端向后台传递参数方法

一、通过表单传递参数

1.前端部分，在前端jsp页面设置form表单，确定需要传递的参数让用户输入，通过点击按钮后submit()提交到后台，

<form id="loginForm" method="post" action="/emp?method=login">
    用户名: <input type="text" name="ename" value="小乔" id="ename"><span id="nameMsg"></span> <br>
    密 &nbsp; 码: <input type="password" name="pwd" value="123456" id="pwd"> <br>
    <button id="sub"  type="submit">登录</button>
    <a href="reg.jsp">注册</a>
</form>

<form id="loginForm" method="post" action="/emp?method=reg">
    用户名: <input type="text" name="ename" id="ename"><span id="nameMsg"></span> <br>
    密 &nbsp; 码: <input type="password" name="pwd" id="pwd"> <br>
    性 &nbsp; 别: <input type="radio" name="esex" id="esex" value="男">男 <input type="radio" name="esex" value="女">女<br>
    工 &nbsp; 资: <input type="number" name="salary" id="salary"> <br>
    编 &nbsp; 号: <input type="number" name="dno" id="dno"> <br>
    出生日期: <input type="Date" name="borndate" id="borndate"> <br>
    <button id="sub"  type="submit">确定</button>
</form>

2.后台通过request.getParameter()，获取form表单的数据

  public String login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String ename = request.getParameter("ename");
        String pwd = request.getParameter("pwd");
        System.out.println(ename + pwd);
        EmpDao mapper = MyBatisUtils.getMapper(EmpDao.class);
        Emp login = mapper.login(ename, pwd);
        if (login != null) {
            return showAll(request, response);
        }
        return Const.REDIRECT + "/login.jsp";
    }

二、使用ajax传递数据（有post和get写法）

1、在js中直接使用ajax作为异步请求

<script type="text/javascript">
    $(function() {
        //1.验证用户名是否存在
        $("#ename").change(function () {
                 //请求的action             //传递的数据
            $.get("/emp?method=checkName", "ename=" + this.value, function (data) {
                 //成功时返回的数据
                if (data == 1) {
                    $("#nameMsg").html("用户名存在").css("color", "red");
                } else {
                    $("#nameMsg").html("");
                }
            })
        });
    })
</script>

2.后台对前端请求的反应，接收数据

String ename= request.getParameter("ename");

  public String reg(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, ParseException {
        EmpDao mapper1 = MyBatisUtils.getMapper(EmpDao.class);
        String ename = request.getParameter("ename");
        String esex = request.getParameter("esex");
        Double salary = Double.valueOf(request.getParameter("salary"));
        Integer dno = Integer.valueOf(request.getParameter("dno"));
        String pwd = request.getParameter("pwd");
        Date borndate = DateUtil.stringToDate(request.getParameter("borndate"));
        Emp emp = new Emp(ename, esex, salary, pwd, dno, borndate);
        int i = mapper1.regEmp(emp);
        MyBatisUtils.commit();
        System.out.println(i);
        if (i > 0) {
            System.out.println("添加成功");
            return showAll(request, response);
        } else {
            MyBatisUtils.rollback();
            return Const.REDIRECT + "reg.jsp";
        }
    }

3.后台对前端发送请求的反应，将Java数据转换为json数据

     public String selectEmpByEno(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String eno = request.getParameter("eno");
        EmpDao mapper1 = MyBatisUtils.getMapper(EmpDao.class);
        Emp emp = mapper1.selectEmpByEno(eno);
        if (emp!=null) {
            ObjectMapper om = new ObjectMapper();
            String string = om.writeValueAsString(emp);
            response.getWriter().print(string);
        }
        return null;
    }

4.再看看前端接收到后端返回的数据是如何处理的

<script>
 /* 修改emp数据 */
    function updateEmp(eno) {
        //1 获取对应的数据,修改是要显示源数据方便用户进行修改
        //使用eno主键获取用户的数据
        $.post("/emp?method=selectEmpByEno&eno="+eno,function (data) {
            if (data=="null") {
                alert("没有需要修改的数据,请重试");
                return;
            }else{
                //有用户的数据,填充数据到form表单当中
                var emp = JSON.parse(data);
                //获取表单项使用val()进行数据填充,把从服务器获取的数据赋值给表单
                $("input[name='ename']").val(emp.ename);
                //先清除原有的默认选择
                $("input[name='esex']").removeAttr("checked");
                if(emp.esex=="女"){
                    $("input[name='esex']").eq(1).prop("checked",true);
                }else{
                    $("input[name='esex']").eq(0).prop("checked",true);
                }
                $("input[name='salary']").val(emp.salary);
                $("input[name='pwd']").val(emp.pwd);
                $("input[name='dno']").val(emp.dno);
                $("input[name='borndate']").val(emp.borndate);
                $("input[name='eno']").val(emp.eno);
                //显示表格
                $("#empDiv").css("display", "block");
            }
        });
    }
</script>

 

<script type="text/javascript">

    $(function() {
        //1.验证用户名是否存在
        $("#ename").change(function () {
            $.get("/emp?method=checkName", "ename=" + this.value, function (data) {
                if (data == 0) {
                    $("#nameMsg").html("用户名不存在").css("color", "red");
                } else {
                    $("#nameMsg").html("");
                }
            })
        });
    })

</script>