基本的JSP中调用Ajax与Servlet进行数据交互

最新推荐文章于 2024-09-22 09:16:40 发布
最新推荐文章于 2024-09-22 09:16:40 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： jsp 文章标签： ajax servlet jsp 数据
首先创建jsp页面中  然后在页面中写入js代码!
[html] view plain copy
print ?
  1. <span style=“font-size:18px;”><%@ page language=“java” import=“java.util.*” pageEncoding=“UTF-8” contentType=“text/html; charset=UTF-8”%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”>  
  8. <html>  
  9.   <head>  
  10.     <base href=“<%=basePath%>”>  
  11.       
  12.     <title>My JSP ‘index.jsp’ starting page</title>  
  13.     <meta http-equiv=“pragma” content=“no-cache”>  
  14.     <meta http-equiv=“cache-control” content=“no-cache”>  
  15.     <meta http-equiv=“expires” content=“0”>      
  16.     <meta http-equiv=“keywords” content=“keyword1,keyword2,keyword3”>  
  17.     <meta http-equiv=“description” content=“This is my page”>  
  18.     <!– 
  19.     <link rel=”stylesheet” type=”text/css” href=”styles.css”> 
  20.     –>  
  21.     <script type=“text/javascript” src=“<%=path%>/js/jquery-2.1.1.min.js” ></script>  
  22.     <script type=“text/javascript”>  
  23.      function  sub(){  
  24.        .ajax({&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:"GET",&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:"/Ajaxex/testServlet",&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:{username:("#name").val()},&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;statusCode:&nbsp;{404:&nbsp;function()&nbsp;{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('page&nbsp;not&nbsp;found');&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:function(data,textStatus){&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(“#sp”).html(data);  
  25.        }  
  26.        });  
  27.      }  
  28.     </script>  
  29.   </head>  
  30.   <body>  
  31.     This is my JSP page. <br>  
  32.        <input type=“text” name=“username” id=“name”>  
  33.        <br>  
  34.        <input type=“submit” id=“btn” onclick=“sub()”>  
  35.     <br>  
  36.     result : <span id=“sp”></span>  
  37.   </body>  
  38. </html>  
  39.   
  40. 写一个Servlet类   
  41.   
  42. package com.hal.servlet;  
  43.   
  44. import java.io.IOException;  
  45. import java.io.PrintWriter;  
  46.   
  47. import javax.servlet.ServletException;  
  48. import javax.servlet.http.HttpServlet;  
  49. import javax.servlet.http.HttpServletRequest;  
  50. import javax.servlet.http.HttpServletResponse;  
  51. import javax.xml.ws.Dispatch;  
  52.   
  53. public class testServlet extends HttpServlet {  
  54.   
  55.     /**  
  56.      *   
  57.      */  
  58.     private static final long serialVersionUID = 1L;  
  59.   
  60.     /**  
  61.      * Constructor of the object.  
  62.      */  
  63.     public testServlet() {  
  64.         super();  
  65.     }  
  66.   
  67.     /**  
  68.      * Destruction of the servlet. <br>  
  69.      */  
  70.     public void destroy() {  
  71.         super.destroy(); // Just puts “destroy” string in log  
  72.         // Put your code here  
  73.     }  
  74.   
  75.     /**  
  76.      * The doGet method of the servlet. <br>  
  77.      *  
  78.      * This method is called when a form has its tag value method equals to get.  
  79.      *   
  80.      * @param request the request send by the client to the server  
  81.      * @param response the response send by the server to the client  
  82.      * @throws ServletException if an error occurred  
  83.      * @throws IOException if an error occurred  
  84.      */  
  85.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  86.             throws ServletException, IOException {  
  87.   
  88.         response.setContentType(“text”);  
  89.         String   username = request.getParameter(“username”);  
  90.         System.out.println(username);  
  91.         PrintWriter out = response.getWriter();  
  92.         out.write(username);  
  93.         request.getRequestDispatcher(“index.jsp”).forward(request, response);  
  94.         out.flush();  
  95.         out.close();  
  96.     }  
  97.   
  98.     /**  
  99.      * The doPost method of the servlet. <br>  
  100.      *  
  101.      * This method is called when a form has its tag value method equals to post.  
  102.      *   
  103.      * @param request the request send by the client to the server  
  104.      * @param response the response send by the server to the client  
  105.      * @throws ServletException if an error occurred  
  106.      * @throws IOException if an error occurred  
  107.      */  
  108.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  109.             throws ServletException, IOException {  
  110.   
  111.         response.setContentType(“text”);  
  112.         PrintWriter out = response.getWriter();  
  113.         out.flush();  
  114.         out.close();  
  115.     }  
  116.   
  117.     /**  
  118.      * Initialization of the servlet. <br>  
  119.      *  
  120.      * @throws ServletException if an error occurs  
  121.      */  
  122.     public void init() throws ServletException {  
  123.         // Put your code here  
  124.     }  
  125.   
  126. }  
  127.   
  128. 配置web.xml文件  
  129.   
  130. <?xml version=“1.0” encoding=“UTF-8”?>  
  131. <web-app xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xmlns=“http://java.sun.com/xml/ns/javaee” xsi:schemaLocation=“http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd” id=“WebApp_ID” version=“3.0”>  
  132.   <display-name>Ajaxex</display-name>  
  133.   <servlet>  
  134.     <description>This is the description of my J2EE component</description>  
  135.     <display-name>This is the display name of my J2EE component</display-name>  
  136.     <servlet-name>AjaxexServlet</servlet-name>  
  137.     <servlet-class>com.hal.servlet.AjaxexServlet</servlet-class>  
  138.   </servlet>  
  139.   <servlet>  
  140.     <description>This is the description of my J2EE component</description>  
  141.     <display-name>This is the display name of my J2EE component</display-name>  
  142.     <servlet-name>testServlet</servlet-name>  
  143.     <servlet-class>com.hal.servlet.testServlet</servlet-class>  
  144.   </servlet>  
  145.   
  146.   
  147.   <servlet-mapping>  
  148.     <servlet-name>AjaxexServlet</servlet-name>  
  149.     <url-pattern>/AjaxexServlet</url-pattern>  
  150.   </servlet-mapping>  
  151.   <servlet-mapping>  
  152.     <servlet-name>testServlet</servlet-name>  
  153.     <url-pattern>/testServlet</url-pattern>  
  154.   </servlet-mapping>  
  155.   <welcome-file-list>  
  156.     <welcome-file>index.html</welcome-file>  
  157.     <welcome-file>index.htm</welcome-file>  
  158.     <welcome-file>index.jsp</welcome-file>  
  159.     <welcome-file>default.html</welcome-file>  
  160.     <welcome-file>default.htm</welcome-file>  
  161.     <welcome-file>default.jsp</welcome-file>  
  162.   </welcome-file-list>  
  163. </web-app>  
  164. </span>  
<span style="font-size:18px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="<%=path%>/js/jquery-2.1.1.min.js" ></script>
    <script type="text/javascript">
     function  sub(){
       $.ajax({
       type:"GET",
       url:"/Ajaxex/testServlet",
       data:{username:$("#name").val()},
       statusCode: {404: function() {
            alert('page not found'); }
         },    
       success:function(data,textStatus){
       $("#sp").html(data);
       }
       });
     }
    </script>
  </head>
  <body>
    This is my JSP page. <br>
       <input type="text" name="username" id="name">
       <br>
       <input type="submit" id="btn" οnclick="sub()">
    <br>
    result : <span id="sp"></span>
  </body>
</html>

写一个Servlet类 

package com.hal.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.ws.Dispatch;

public class testServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    /**
     * Constructor of the object.
     */
    public testServlet() {
        super();
    }

    /**
     * Destruction of the servlet. <br>
     */
    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    /**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text");
        String   username = request.getParameter("username");
        System.out.println(username);
        PrintWriter out = response.getWriter();
        out.write(username);
        request.getRequestDispatcher("index.jsp").forward(request, response);
        out.flush();
        out.close();
    }

    /**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text");
        PrintWriter out = response.getWriter();
        out.flush();
        out.close();
    }

    /**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occurs
     */
    public void init() throws ServletException {
        // Put your code here
    }

}

配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>Ajaxex</display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>AjaxexServlet</servlet-name>
    <servlet-class>com.hal.servlet.AjaxexServlet</servlet-class>
  </servlet>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>testServlet</servlet-name>
    <servlet-class>com.hal.servlet.testServlet</servlet-class>
  </servlet>


  <servlet-mapping>
    <servlet-name>AjaxexServlet</servlet-name>
    <url-pattern>/AjaxexServlet</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>testServlet</servlet-name>
    <url-pattern>/testServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>
</span>
vue-axios与servlet进行数据交互
林一佳的技术人生
07-09 2150
实习期间参与的工作总结 每天早上花30分钟进行金十数据官网的冒烟测试查看一些界面、功能情况 金十数据appV4.2.2版本到V4.6.0 交易侠几个版本的迭代 记不起来问林丹娜 美港电讯日历和财报模块的测试 零散任务（新版交易侠官网、h5页面、） 看看gitlab回忆一下 软件测试工作需要的软实力（心态+能力） 看gitlab想到了之前的团队 很好 沟通表达能力和发现问题的细心能力 工作之中的测试流程变更 带着原来那种灵活学习能力极强的感觉回到工作中 搞虚的从来就不要怕 加点靠谱和谨慎态度 做就做到最好 不
Servlet与jsp ajax
qq_45807578的博客
07-27 165
创建jsp界面和servlet servlet界面 在doGet方法里写代码 @WebServlet("/ajaxServlet") public class ajax extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated meth
ajax+servlet+jquery+jsp示例
04-06
从后台取出json数据，然后以table的形式展出。包含序号，名字，年龄。如1，张三，22。一共两行数据。
基础实践：使用JQuery Ajax调用Servlet
最新发布
weixin_52937170的博客
09-22 574
基础实践：使用JQuery Ajax调用Servlet
JSP通过ajax调用servlet，servlet调用service，service调用dao，dao调用数据库；然后数据库->dao->service->servlet-(json)->jsp
Jenny_xuexi的博客
10-19 1292
一、Regist.jsp（Regist.jsp调用AccountExistsServlet） 1.获取前台传过来的username值，通过input[name=username] 2.将username传递给后台AccountExistsServlet并判断当前用户是否存在（前端把数据提交给后台通过json） 3.后台返回flag，判断好值是否存在给用户一个友好的提示 <%@ page ...
使用 javascript 通过 AJAX 向 servlet 发出 HTTP 请求示例
allway2的博客
03-18 3868
这篇文章解释了 Ajax 的基础知识以及如何使用 javascript 通过 AJAX 向 servlet 发出 HTTP 请求。 Ajax（异步 Javascript 和 XML）是一种我们可以在 Web 开发中使用的技术，用于创建更快的用户界面更新和更好的用户体验。Ajax 使用 XMLHttpRequest 对象与服务器进行通信。使用 ajax，用户可以在不提交页面或重新加载浏览器页面的情况下将数据发布到后端服务器。使用 servlet 创建 AJAX 示例应用程序非常简单。 在这篇文章
jsp使用jquery通过ajax方式访问servlet
ZXL工作室
12-03 1416
jsp          My JSP 'index.jsp' starting page  --> function sub() {    $.ajax({    type:"post",//请求方式   url:"./test",//发送请求地址    data:{//发送给数据库的数据  
Ajax和servlet数据交互小实例
07-22
6. **Ajax与Servlet交互的优势**： - **用户体验**：通过异步交互，用户无需等待整个页面刷新，提升了交互体验。 - **资源利用**：仅加载必要的数据，减少了网络带宽消耗和服务器负载。 7. **注意事项**： - **...
实例解读Ajax与servlet交互的方法
09-04
- Servlet（`ajaxServlet`）继承自`HttpServlet`，负责处理来自Ajax请求的数据。在示例中，Servlet没有显示完整的实现，但通常它会执行数据库查询或其他业务逻辑，然后生成XML响应。 - 要注意，Servlet需要处理`...
使用jquery 的ajax 与 Java servlet的交互代码实例
10-16
总结，这个实例展示了如何使用jQuery的AJAX与Java Servlet进行交互：前端通过AJAX发送数据，后端通过Servlet接收并处理数据，最后将处理结果返回给前端。这是一个基础的交互模型，实际应用中可能涉及更复杂的业务...
JSP与Servlet的数据交互
wangjunlei666的博客
10-26 4613
jsp与Servlet的数据交互 随着javaweb学习的深入，前后端数据交互变得越来越频繁，今天就让我们一起总结一下他们是如何交互的， jsp与servlet的交互分为： 从jsp到servlet， 从servlet到jsp， 首先要明白一点,servlet需要容器的支持才能够运行,如Tomcat、jetty 达到servlet的请求，需要ServletRequest对象和ServletResponse对象去处理servlet在服务器中的运行：1.加载到内存->2.初始化(init()) -
servlet,jsp使用ajax进行数据交互
IWantImagine的博客
10-30 678
第一次写博客，那就从我最近开始学的东西开始发布吧，给自己留个笔记，希望也可以帮助大家! 这是jsp页面<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript&q
使用Jquery--Jsp与servlet之间的数据交互
热门推荐
illusion_Luna的专栏
11-02 1万+
有过java web开发经验的人都知道，Jsp与servlet之间的数据交互多种多样，但最常见的莫过于表单提交咯(这里我没说错吧— ,—),通过jsp标签form的action指定你要发送表单数据的目的地，在指定发送的方式(get或者post),点击提交按钮，而在servlet端使用request.getParameter(key)接收，这样就可以达到jsp与servlet之间的数据交互。而我今天
Java+servlet+jsp页面ajax请求
10-10
Java+servlet+jsp页面ajax请求 有详细的注释
JSP使用AJAX与Servlet互相传值
左手121
10-03 1784
工程结构： WebContent文件夹存放我们的html、CSS、js、JPS等文件。程序运行的就指向该文件夹。即程序的根目录 src文件存放我们的servlet javaClass等文件。程序运行之后会自动将这些文件编译存放在WebContent/WEB-INF/classes文件夹中。 WebContent/WEB-INF/lib存放一些我们引用的外部包等文件 web.xml文件存放在WebC
Servlet及Ajax数据交互
01-02
在本示例中，我们将探讨Servlet如何与Ajax进行数据交互，从而实现无刷新页面更新。 首先，让我们了解一下Servlet的工作原理。当用户通过浏览器发送一个HTTP请求到服务器时，Servlet容器（如Tomcat）会捕获这个请求...
jsp向servlet传递参数,通过ajax
低调的嚣张
04-24 1859
今天尝试了一下,用ajax方法提交数据的方法,觉得还是比较厉害的 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h
JSP(ajax)+Servlet实现简单的登录功能
Yang_xinqiao的博客
09-19 4663
之前在jsp中写js或者引入js，有不少引入了没什么效果，和用HBuilder写的效果差了很多，花了不少时间弄，没有搞定，应该是自己的底子太差劲了，对jsp和js的理解不够深；今天学了Ajax发现不少的东西用Ajax写起来更方便些。我就简单的写一个小功能实现一下登录。 //这是登录界面 &lt;%@ page language="java" contentType="text/html; ch...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值