一、静态页面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>
参考的原文：基于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（同时传递处理好的数据过去）来显示结果。

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

Web项目中前端页面引用外部Js和Css的路径问题
公众号:南宫一梦 Web项目中前端页面引用外部Js和Css的路径问题一般我们在做Web项目时,通常会将多个页面引入的公共js和css文件抽取出来,单独写成一个公共文件,以期方便各个页面单独引入,达到 ...
Web项目中前端页面通过URL传中文或 # 特殊字符到后台出现乱码解决方案
对于刚入行新手来说碰到URL传递中文数据到后台出现乱码或是传递包含特使符号'#'后端获取不到的情况是比较头疼的事,这里我就告诉你这两个的解决的方式: 1.URL传递中文前端页面:中文字符串用 enc ...
WEB开发中的页面跳转方法总结
1.PHP header()调转 <?php //302跳转 $url = "http://www.baidu.com/"; header("Location: $ ...
无闪烁刷新页面 php,AJAX_Ajax实现无闪烁定时刷新页面实例代码，在Web开发中我们经常需要实现 - phpStudy...
Ajax实现无闪烁定时刷新页面实例代码在Web开发中我们经常需要实现定时刷新某个页面: 1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录): 2.实现实时站 ...
Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
web开发中的长度单位（px,em,ex,rem），如何运用，看完这篇就够了！
原创 2017-03-08 web小二 web前端开发作为一名前端开发人员,css中的长度单位,都是我们在工作中非常熟悉的名词,因为没有它们,我们就不能声明某个字符应该多大,或者某些图像周围应该留白 ...
Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
第123天：移动web开发中的常见问题
一.函数库 underscoreJS _.template: <ol class="carousel-indicators"><!--渲染的HTML字符串--&g ...
【笔记-node】《imooc-nodejs入门到企业web开发中的应用》
目录课程名备注入门必学 nodejs入门到企业web开发中的应用框架与工具 node.js+koa2+mysql打造前后端分离精品项目<旧岛> 项目实战 20190317-2020 ...

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

一、静态页面xx.html如何跟后台交互：

二、jsp页面如何跟后端服务器交互：

总结：每个xx.html文件,xx.jsp文件，servlet响应程序...都是需要在客户端浏览器通过URL来访问的。

这样的方式跳转到其它有html内容的页面的URL（同时传递处理好的数据过去）来显示结果。

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

最新文章

热门文章

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

一、静态页面xx.html如何跟后台交互：

二、jsp页面如何跟后端服务器交互：

总结：每个xx.html文件,xx.jsp文件，servlet响应程序...都是需要在客户端浏览器通过URL来访问的。

这样的方式跳转到其它有html内容的页面的URL（同时传递处理好的数据过去） 来显示结果。

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

最新文章

热门文章

这样的方式跳转到其它有html内容的页面的URL（同时传递处理好的数据过去）来显示结果。