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

最新推荐文章于 2021-08-05 12:44:11 发布

halking

最新推荐文章于 2021-08-05 12:44:11 发布

阅读量2.3w

点赞数 5

分类专栏： JavaWeb 文章标签： jsp ajax

本文链接：https://blog.csdn.net/u011031689/article/details/50866713

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先创建jsp页面中然后在页面中写入js代码!

<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>

halking

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
基本的JSP中调用Ajax与Servlet进行数据交互

首先创建jsp页面中然后在页面中写入js代码!<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> ">
复制链接

扫一扫

专栏目录