WEB的数据交互具体流程

前一段时间小小的总结了一下，web的前后交互的各种方式可能没写全，后期再写，话不多说

1.    前端传递数据到servlet，servlet获取数据后操作DAO修改数据库，然后servlet将某些参数返回到前端，前端动态显示数据
（例如：登录，前端获取登录名密码后通过表单传递给servlet，servlet通过调用DAO层根据用户名查询其密码是否与传递过来的密码是否相同，然后将结果返回到前端页面）
2.    首先前端页面数据显示必定是动态的，具体的数据要看后端是通过什么传递数据的，然后在前端用相应的方法显示，具体的可以搜一下，前端页面动态显示后端传递的数据：（JS获取session中的信息https://blog.csdn.net/fly910905/article/details/79206530）（获取request中的数据https://blog.csdn.net/u014074697/article/details/74928159）
（C标签的使用 <C:foreach>）
（JSON）
3.    前端向后端传递数据方式
3.1    <a>标签

<a href="position/add.jsp" style="text-decoration:none;"><span class="dl-button">添加</span></a>//页面间跳转
<a href="position?action=positionBaoMingList" style="text-decoration:none;"><span class="dl-button">已报名&nbsp;&nbsp;&nbsp;</span></a>//向后台跳转

2.2 ajax
 

$.ajax({
                type : "post",//请求类型
                ansyv : false,//是否异步
                data : {    //传递参数
                    "txtKeyWord" : txtKeyWord
                },
                datatype : "json",  //参数类型
                contentType : "application/x-www-form-urlencoded; charset=utf-8",
                url : "position?action=positionList",  //地址
                success : function(data) {   //判断是否成功
                    var result = eval('(' + data + ')') //转化获取的json对象
                    if (result.status) {
                        location.href = "position?action=positionFindList&txtKeyWord=" + txtKeyWord;
                    } else {
                        alert("查询失败");
                    }
                },
            })

2.3  from表单提交数据
 

<form
                    action="positionquestion?action=updateQuestion&qid=${questions.qid}&pid=${position.pid}"
                    method="post">
</form>

2.3.1 form表单的ajax提交方式

 $('#form1').serialize()      PS：提交表单的序列化变成json对象。就这个知识点，剩下的都是form和ajax的组合

 <div>
        <form  id="form" onsubmit="return false" action="##" method="post">

            学号：<input type="text" name="sid">
            姓名：<input type="text" name="name">
            <input type="button" value="添加" onclick="add()">&nbsp;<input type="reset" value="重置">
        </form>
    </div>

<script>
        function add() {
            $.ajax({
                type: "post",
                ansyv: false,
                data: $('#form').serialize(),
                datatype: "json",
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
      url: "../studentServlet?action=add",//多个提交到同一个servlet所以追加跳转的具体方法                 
                success: function (data) {
                    var result = eval('(' + data + ')') //转化获取的json对象
                    if(result.status==1){
                        alert("成功");
                    }else if (result.status==-1){
                        alert("学生已存在");
                    }else{
                        alert("添加失败");
                    }
                },
            });

        }
    </script>

4.    后端获取数据
 

String action=request.getParameter(“action”);

request.getParameter(“action”);//返回的是String类型的

 

5.    根据servlet中的某个方法所调用的DAO层操作数据库，然后返回到前端页面
 

request.getRequestDispatcher("position/list.jsp").forward(request, response);//转发
 
 response.sendRedirect("position/list.jsp");//重定向
   ResponseUtil.write(response, obj);// 发送请求内容到页面

6.    后台向前端传递的数据放在哪里
      1.    session
      2.    request
      3.    json

           从博客园把我的东西弄过来之后，由于好久没有写web的东西，我忽然间想不起来form表单提交数据到后天之后怎么返回了，可能是之前写了一段时间的smm框架+easyui，现在突然写简单的小web的系统给我整懵逼了。（单纯的知识没有掌握好而已）so现在把之前用的后台向前台传递数据的代码放上来，（json需要jar包自己百度查）

（a form input）
request.setAttribute("positionList", positions);
			mans=mandao.manList(conn, studentid);//暂时为空   studentid
			request.setAttribute("mans", mans);
			request.getRequestDispatcher("position/list.jsp").forward(request, response);


（a form input）
HttpSession session = request.getSession();
		session.setAttribute("txtKeyWord", txtKeyWord);



（ajax提交返回）
 JSONObject obj = new JSONObject();
        List<Book> m = bookDao.findBookList(name);
        if (m == null) {
            obj.put("status", -1);
        } else if (m.size() > 0) {
            obj.put("status", 1);
            obj.put("books", m);
        } else {
            obj.put("status", 0);
        }
        try {
            ResponseUtil.write(response, obj);
        } catch (Exception e) {
            e.printStackTrace();
        }

（SSM+easyui）
        这个就一句话我就不打了

----------------------------------------------------------------------------------------------------------

2019/7/30

    今天写小项目的时候，一直想着老是用ajax用烦了（真香警告），虽然他很好用，所以我一直在考虑其他的提交方式 <form>啦<a>啦还有<input>。可是我思来想去的，总是在后台返回数据的时候出问题，不是说这些方法不能实现，但是真香，算了我还是接着用ajax吧。嘛，不急不急我再仔细的想想，不能局限于这些，还有其他的语言。