ajax与Servlet

时间：2022-09-21 08:30:23

1.后台返回text类型的数据

<%@ page language="java" import="java.util.*" pageEncoding="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="js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

       $(function(){

          $("#btn").click(function(){

          //获取用户的输入

         var name= $("#name").val();

           $.ajax({

            url:"AjaxServlet",  /*对应的是web.xml文件中url  也是我们的请求路径  */

            type:"post", /* 请求的方式 */

            data:"name="+name,  /* 请求中携带的数据 */

            dataType:"text",  /* 后台返回的数据类型  */

            beforeSend:function(){

              alert("请求正在处理。。。。。。");

            },

            success:function(data){

            alert(data);

            }

            });

          });

       });

    </script>

</head>

<body>

     用户名：<input  type="text" id="name">

   <input  type="button" id="btn" value="请求ajax">

</body>

</html>

前台jsp页面

public class AjaxServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doPost(request, response);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        System.out.println("进入了ajax..........");

        response.setHeader("Content-type", "text/html;charset=utf-8");

         // 01.获取ajax请求过来的name值

        String name = request.getParameter("name");

            response.getWriter().print(name);

    }

}

创建对应的servlet

2.返回单个对象

public class Student {

    private String name;

    private String pwd;

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getPwd() {

        return pwd;

    }

    public void setPwd(String pwd) {

        this.pwd = pwd;

    }

    public Student(String name, String pwd) {

        super();

        this.name = name;

        this.pwd = pwd;

    }

    public Student() {

        super();

    }

    @Override

    public String toString() {

        return "Student [name=" + name + ", pwd=" + pwd + "]";

    }

}

Student实体类

前台jsp页面 
<%@ page language="java" import="java.util.*" pageEncoding="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="js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

       $(function(){

          $("#btn").click(function(){

          //获取用户的输入

         var name= $("#name").val();

           $.ajax({

            url:"AjaxServlet",  /*对应的是web.xml文件中url  也是我们的请求路径  */

            type:"post", /* 请求的方式 */

            data:"name="+name,  /* 请求中携带的数据 */

            dataType:"json",  /* 后台返回的数据类型  */

            beforeSend:function(){

              alert("请求正在处理。。。。。。");

            },

            success:function(data){

            /* 返回集合 */

           //返回单个对象 alert(data);

            $("#myDiv").append("姓名："+data.name);

            $("#myDiv").append("密码："+data.pwd);

            }

            });

          });

       });

    </script>

</head>

<body>

     用户名：<input  type="text" id="name">

   <input  type="button" id="btn" value="请求ajax">

   <div id="myDiv"></div>

</body>

</html>

public class AjaxServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doPost(request, response);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        System.out.println("进入了ajax..........");

        response.setHeader("Content-type", "text/html;charset=utf-8");

        // 创建一个Student对象 返回给前台

        Student student = new Student("admin1", "123456");

        // 需要把student对象转换成json格式

        System.out.println("转换前==》" + student);

        Gson gson = new Gson();

        // json 就是转换之后的 student对象 {"name":"admin","pwd":"123456"}

        String json = gson.toJson(student);

        System.out.println("转换后==" + json);

        response.getWriter().print(json);

    }

}

对应的servlet

3.返回对象的集合

<%@ page language="java" import="java.util.*" pageEncoding="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="js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

       $(function(){

          $("#btn").click(function(){

          //获取用户的输入

         var name= $("#name").val();

           $.ajax({

            url:"AjaxServlet",  /*对应的是web.xml文件中url  也是我们的请求路径  */

            type:"post", /* 请求的方式 */

            data:"name="+name,  /* 请求中携带的数据 */

            dataType:"json",  /* 后台返回的数据类型  */

            beforeSend:function(){

              alert("请求正在处理。。。。。。");

            },

            success:function(data){

            /* 返回集合 */

             $("#myDiv").append("<span>姓名</span>&nbsp;&nbsp;&nbsp;");

             $("#myDiv").append("<span>密码</span></br>");

            //遍历传递过来的json数组

            $(data).each(function(i){

            $("#myDiv").append("<span>"+data[i].name+"</span>&nbsp;&nbsp;&nbsp;");

            $("#myDiv").append("<span>"+data[i].pwd+"</span></br>");

            })

            }

            });

          });

       });

    </script>

</head>

<body>

     用户名：<input  type="text" id="name">

   <input  type="button" id="btn" value="请求ajax">

   <div id="myDiv"></div>

</body>

</html>

前台jsp页面

public class AjaxServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doPost(request, response);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        System.out.println("进入了ajax..........");

        response.setHeader("Content-type", "text/html;charset=utf-8");

        Student student1 = new Student("admin1", "123456");

        Student student2 = new Student("admin2", "123456");

        Student student3 = new Student("admin3", "123456");

        Student student4 = new Student("admin4", "123456");

        ArrayList<Student> list = new ArrayList<Student>();

        list.add(student1);

        list.add(student2);

        list.add(student3);

        list.add(student4);

        System.out.println("转换前==》" + list);

        Gson gson = new Gson();

        String json = gson.toJson(list);

        System.out.println(json);

        response.getWriter().print(json);

    }

}

对应的servlet

ajax与Servlet的更多相关文章

  1. ajax和servlet交互，表单日历插件，表单验证，form&period;js

    我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...

  2. ajax和servlet交互

    网上有比较多的教程来将如何实现ajax与servlet的交互了,这里和这里的教程可以参考参考,在此处我只简单说明一下,并记录一下我这次遇到的问题. 整个思路是:写个js函数,在里面使用XHR(ajax ...

  3. Jquery&plus;ajax&plus;json&plus;servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  4. Ajax&plus;Jsp&plus;servlet&plus;json技术的使用

    Ajax+Jsp+servlet+json技术的使用 在使用json的时候,记得必须导入如下几个.jar包,最好是手动复制.jar包只lib路径下,否则可能出现异常. commons-beanutil ...

  5. servlet向ajax传递list数据类型，ajax向servlet传递array数据类型

    因工作需要, 1,后台向前台传递一个list 2,前台向后台传递类似于list的结构,但是因为javascript不支持list类型,所以只能使用二维数组代替 后台运行后的截图:           ...

  6. ajax调用servlet

    1.利用myecilpse建立一个web项目 2.导入需要的包: commons-beanutils.jar commons-collections-3.1.jar       commons-lan ...

  7. 服务器端AJAX的Servlet代码实现

    package com.itheima.servlet; import java.io.IOException; import javax.servlet.ServletException; impo ...

  8. Ajax（6） Ajax向servlet请求数据库操作 并显示到当前页面 这个未经测试

    假设:1.你的页面在Web-Root下,内容为: <div id="showMsg"></div><input type="text&quo ...

  9. ajax与servlet交互（通过JSON）&comma;JAVA的arraylist传到前端的方法

    所实现的效果:首先从前端(ajax)传参数给servlet,然后servlet经过处理,把arraylist类型的参数以JSON字符串的形式返回给前端(ajax),然后前端经过解析,把JSON字符串解 ...

随机推荐

  1. &period;net 添加Cookie的4种方法

    第一种添加Cookie方法 HttpCookie myCookie = new HttpCookie("userrole"); myCookie.Values["a&qu ...

  2. 理解reserve与resize

    1.首先明白capacity与size的概念,capacity表示当前可以容纳多少个元素,size表示当前有多少个元素.为了避免频繁地分配内存,vector预留了一些内存.也就是说:size<= ...

  3. 单元测试时候使用&lbrack;ClassInitialize&rsqb;会该方法必须是静态的公共方法，不返回值并且应采用一个TestContext类型的参数报错的解决办法

    using Microsoft.VisualStudio.TestTools.UnitTesting; 如果该DLL应用的是 C:\Program Files\Microsoft Visual Stu ...

  4. nginx编译安装指定参数

    --prefix=/app/nginx # 安装目录 --conf-path=/app/nginx/conf/nginx.conf # 配置文件 --sbin-path=/app/nginx/sbin ...

  5. Golang 容器和不同header的解析

    记录一下,用golang实现一个静态资源容器,膜拜下强人 http.Handle("/", http.FileServer(http.Dir(currentPath+"/ ...

  6. python新手总结&lpar;二&rpar;

    random模块 随机小数 random uniform 随机整数 randint randrange 随机抽取 choice sample 打乱顺序 shuffle random.random() ...

  7. WGCNA &vert; weighted correlation network analysis

    早就接触过这个包了,只是一直畏惧,以为很复杂,也没有应用场景,所以认识很肤浅. 现在有应用场景了,我自己开发了一个幼稚的版本,发现了很多需求,后来想起了WGCNA似乎部分解决了我的问题,今天认真打开了 ...

  8. linux内核分析 第六周

    一.进程的描述 为了管理进程,内核必须对每个进程进行清晰的描述,进程描述符提供了内核所需了解的进程信息. 1.进程控制块PCB--task_struct 进程状态 进程打开的文件 进程优先级信息 2. ...

  9. windows安装oracle11g第二部

    Oracle 11g数据库安装及配置 安装Oracle数据库: 1)压缩包解压,双击运行win64_11gR2_database\database\setup.exe 2)输入电子邮件,点击“下一步” ...

  10. 【WebService】——CXF整合Spring

    相关博客: [WebService]--入门实例 [WebService]--SOAP.WSDL和UDDI 前言: 之前的几篇博客基本上都是使用jdk来实现WebService的调用,没有使用任何框架 ...

相关文章