码迷,mamicode.com
首页 > Web开发 > 详细

web开发中前端页面是如何跟后端服务器数据交互的

时间:2019-12-01 13:48:57      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:简单的   value   没有   介绍   浏览器   etc   文件路径   article   else   

 

本文链接:https://blog.csdn.net/kangkanglhb88008/article/details/84446173后端服务器一般是指servlet容器,用于执行java源程序
常见的网页有html,htm,shtml,asp,aspx,php,jsp等格式前两个常用于静态网页,后面几个常用于动态网页。
这里前端网页以比较常见的 xx.html 和 xx.jsp 网页作为介绍,其它类似
 
一、静态页面xx.html如何跟后台交互:先来看一个最简单的登陆界面源代码  <body>    <form action="loginServlet" method="post">       user:<input type="text" name="username"/>       password:<input type="password" name="password"/>             <input type="submit" value="Submit"/>    </form>  </body>
这是一个表单,我们看到里面都是纯html内容,这是一个静态页面,当我们点击submit按钮时候,浏览器会提交表单内的数据到服务器的loginServlet这个相对地址,我们看看浏览器的地址变成啥了:
这不就是我们的后台servlet的地址嘛,然后这个地址指向的是loginServlet这个servlet,然后在web.xml文件中找到这个servlet关联的java类,从而执行了服务器端的程序(第一次执行,那么会实例化,然后执行里面init()函数,然后执行service()函数,如果是第二次调用,那么不用实例化了,直接执行service()函数),我们来看看服务器端的源程序:package com.atguigu.javaweb;
import java.io.IOException;import java.io.PrintWriter;
import javax.servlet.Servlet;import javax.servlet.ServletConfig;import javax.servlet.ServletContext;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServletRequest;
public class loginServlet extends MyGeneriServlet {    public void init(javax.servlet.ServletConfig config) throws ServletException{        super.init(config);    }    public void service(ServletRequest request, ServletResponse response)            throws ServletException, IOException {        //获取请求方式是GET,POST方式?        HttpServletRequest httpServletRequest=(HttpServletRequest) request;        String method=httpServletRequest.getMethod();        System.out.println(method);        //1.获取请求参数:username,password        String username=request.getParameter("username");        String password=request.getParameter("password");        //获取请求参数        String initUser=getServletContext().getInitParameter("user");        String initpassword=getServletContext().getInitParameter("password");                 PrintWriter out=response.getWriter();        //3.对比        if(initUser.equals(username)&&initpassword.equals(password)){            out.print("Hello"+username);    // 生成html内容        }else{            out.print("Sorry"+username);    // 生成html内容        }    }}上面没有判断此时对servlet的请求是post还是get方法,不过没关系,request这个传进来的参数以及包含了这些信息,自己判断一下执行相应的操作即可
由于页面路径已经跳转到servlet了,但是servlet不是一个.html文件啊,那岂不是没有内容供浏览器显示了,不是的,我们看到返回的参数response中的对象PrintWriter out用于动态生成html内容的字符串"Hello",所以这时候相当于servlet这个路径也有了html内容了,浏览器的页面就会显示上述字符串了
二、jsp页面如何跟后端服务器交互:jsp网页文件就是html内容里面插入java代码,当我们访问.jsp网页文件时候,服务器提前已经知道这个页面内含有java代码,那么服务器这边就得先执行一下这些代码(就跟执行servlet的java源代码一样),同时把执行的结果嵌入在当前这个.jsp页面内,我们看看源代码:
<%@page import="java.util.Date"%>     // 如果这个.jsp页面中用到了一些java函数,就得导入库,这就跟java源文件一样的
<html>    <head>           <title>第一个 JSP 程序</title>    </head>    <body>           <%                  out.println("Hello World!"); // 这里实际上是服务器执行了结果,然后以文本返回给浏览器进行显示           %>    </body></html>
上面红色代码就是java代码,刚刚说过对象PrintWriter out用于动态生成html内容的字符串,所以服务器执行完嵌入在里面的java代码后,就是动态生成了一串html代码,然后一起传给客户端浏览器进行显示
当然这种情况.jsp里面没有按钮,表单这样的控件,现在再来看看有表单这种.jsp如何跟后端交互:
view.jsp
<%@page import="day03_student.Student"%>  // 还是得带入java用到的库文件
<style type="text/css">  // 样式设计部分,即css
table{
border:1px solid gray;
border-collapse:collapse;
width:50%
}
td{
border:1px solid gray;
}
</style>
<body>    <h2>学生个人基本信息</h2>   <table>   <tr>    <td>编号</td>    <td>学号</td>    <td>姓名</td>    <td>性别</td>    <td>年龄</td>    </tr>      <tr>      <%    Student s=(Student)request.getAttribute("students");  //      %>     <td><%=s.getId()%></td>     <td><%=s.getStuno()%></td>     <td><%=s.getName()%></td>     <td><%=s.getGender()%></td>     <td><%=s.getAge() %></td>     </tr>   </table>  </body>参考的原文:https://blog.csdn.net/myclass1312/article/details/80571867 
这时候如果我们直接访问这儿view.jsp文件,应该是没有数据的,因为对象s无法从request对象获取,必须得先给这个request对象赋值才行,即应该从如下servlet路径跳转来view.jsp文件路径才行
public class viewservlet extends HttpServlet {     private StudentDao dao=new StudentDao();    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {                String idstr = request.getParameter("id");                int id = Integer.parseInt(idstr);                //将数据放入request中,传递到页面                Student student=dao.queryById(id);                request.setAttribute("students", student);                request.getRequestDispatcher("view.jsp").forward(request, response);    // 这里是从当前页面跳转去哪个页面,同时传递了request, response这两个参数,这时候的request就是有内容的,接下来的view.jsp页面就能获取到内容而且动态生成html内容    }        public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        this.doGet(request, response);        }}
总结:每个xx.html文件,xx.jsp文件,servlet响应程序...都是需要在客户端浏览器通过URL来访问的。xx.jsp文件,servlet响应程序因为含有java源代码,需要服务器电脑先执行一下,.jsp文件中的java代码一般会动态生成一些html内容嵌入在当前.jsp文件里面一起给浏览器显示出来;而servlet中的java代码一般是数据处理功能的,可能会通过request.getRequestDispatcher("view.jsp").forward(request, response); 这样的方式跳转到其它有html内容的页面的URL(同时传递处理好的数据过去) 来显示结果。
————————————————版权声明:本文为CSDN博主「biao2488890051」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/kangkanglhb88008/article/details/84446173

web开发中前端页面是如何跟后端服务器数据交互的

标签:简单的   value   没有   介绍   浏览器   etc   文件路径   article   else   

原文地址:https://www.cnblogs.com/gloriazhang/p/11965711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!