web开发中前端页面是如何跟后端服务器数据交互的「建议收藏」

web开发中前端页面是如何跟后端服务器数据交互的「建议收藏」后端服务器一般是指servlet容器,用于执行java源程序常见的网页有html,htm,shtml,asp,aspx,php,jsp等格式前两个常用于静态网页,后面几个常用于动态网页。这里前端网页以比较常见的xx.html和xx.jsp网页作为介绍,其它类似一、静态页面xx.html如何跟后台交互:先来看一个最简单的登陆界面源代码 <body>…

大家好,又见面了,我是你们的朋友全栈君。

后端服务器一般是指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>
  • web开发中前端页面是如何跟后端服务器数据交互的「建议收藏」
  • 这是一个表单,我们看到里面都是纯html内容,这是一个静态页面,当我们点击submit按钮时候,浏览器会提交表单内的数据到服务器的loginServlet这个相对地址,我们看看浏览器的地址变成啥了:
  • web开发中前端页面是如何跟后端服务器数据交互的「建议收藏」
  • 这不就是我们的后台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>
    参考的原文:基于Myeclipse与MySQL数据库表格的增删改查_myclass1312的博客-CSDN博客 

  • 这时候如果我们直接访问这儿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(同时传递处理好的数据过去) 来显示结果。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/131494.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • java backoff_Java BackOff类代码示例

    java backoff_Java BackOff类代码示例importorg.apache.beam.sdk.util.BackOff;//导入依赖的package包/类/***WritesabatchofmutationstoCloudDatastore.**Ifacommitfails,itwillberetriedupto{@link#MAX_RETRIES}times.All*mutations…

  • shell中if语句_shell脚本if判断

    shell中if语句_shell脚本if判断提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一、if语句1.if单分支判断2.if双分支判断3.if多分支判断总结提示:以下是本篇文章正文内容,下面案例可供参考一、if语句1.if单分支判断●当“条件成立”时执行命令序列●否则不执行任合操作语法格式♦if空格条件测试then命令序列fiif加空格加一个条件测试,如果这个条件测试结果为真那么就执行then后面的命令序列,这个命令序列可以是一条命令也可以是多条命令只要条件测试为真,.

  • 盘点 6 个开源的音乐播放器!

    盘点 6 个开源的音乐播放器!盘点几个开源的音乐播放器,在这些项目中你可以学习到React、Vue、Kotlin等相关的技术栈。有的是仿当前比较火的音乐应用,而有的是开发者自主开发。本期推荐开源项目目录:1.仿QQ音乐2.网易云音乐3.Material主题音乐播放器4.不太现代的音乐播放器5.专注于免费流媒体资源的桌面音乐播放器01仿QQ音乐模仿QQ音乐网页版界面,采用fl…

  • 怎么卸载电脑上的mysql_mysql installer

    怎么卸载电脑上的mysql_mysql installer如何完美的卸载掉Mysql?按以下几个步骤去执行。步骤一确认你的mysql服务是关闭的状态,不然卸载不干净。在我的电脑(计算机)–管理–服务和应用程序–服务,找到mysql把状态关闭。步骤二在控制面板中卸载mysql软件。步骤三卸载过后删除C:ProgramFiles(x86)\MySQL该目录下剩余了所有文件,把mysql文件夹也删了。因为我的系统是64位,把软件安装的位置是E…

  • qmake 教程

    qmake 教程qmake的介绍qmake的介绍qmake是Trolltech公司创建的用来为不同的平台和编译器书写Makefile的工具。手写Makefile是比较困难并且容易出错的,尤其是需要给不同的平台和编译器组合写几个Makefile。使用qmake,开发者创建一个简单的“项目”文件并且运行qmake生成适当的Makefile。qmake会注意所有的编译器和平台的依赖性,可以把开发者解放出来

  • html中bgsound背景音乐标签在浏览器里无法播放[通俗易懂]

    html中bgsound背景音乐标签在浏览器里无法播放[通俗易懂]1.原代码:问题:经过尝试,发现仅仅只有IE浏览器可以支持自动播放,但是需要先进行添加控件(自动弹出)。其他浏览器不支持自动播放。查找W3C后发现是bgsound的兼容性

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号