ajax与Servlet

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实体类

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

前台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对象 返回给前台
        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

时间: 2024-11-05 12:26:03

ajax与Servlet的相关文章

ajax交互servlet返回数据和jdbc模糊查询-中文-已经设置了UTF-8和解决了乱码

1.编码是将字符按一定翻译方式转换成字节存储在内存或外存中,解码是按照一定翻译方式将存储中的字节转换成字符. 2.ASCII是单字节,最高位总为0,相当于只占用了一个字节的7位,2^7=128个字符,相当于键盘上的128个键,有大小写因为字母,有*,%¥#@!+....等这些可显示字符,也有不可以显示的控制符F1,ctr... 而ISO-8859-1是启用了ASCII码的最高位,理论上是能再多128位,实际上没用掉这么多,至于多了那些,你们自己查下表 UTF-8是可变长的,具体中文几个字节,怎么

ajax和servlet交互,表单日历插件,表单验证,form.js

我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID</td> <td>姓名</td> <td>地址</td> </tr> </table> </body> 我的servlet: response.setContentType("text/html;char

ajax jQuery+servlet

编写具体的Ajax代码,使用jQuery框架将会节省很多的时间,当我们点击按钮的时候,将一些信息收集起来,然后通过Ajax传递到服务端,然后使用布局修改DOM来实现无刷新的效果. 要想实现ajax,先来看一下$.ajax()的一些常用属性吧: 下面通过Ajax实现登录信息的验证,先来看一下以"GET"的请求方式: jQuery代码: 1 <script type="text/javascript" src="<%=basePath%>/J

WebService学习笔记-Ajax通过servlet请求跨域Webservice

ajax不能直接访问跨域的Webservice,但是可以通过servlet去访问跨域的Webservice 页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

【设计模式】:Dao设计模式详解及一个简单的项目(AJAX+JSP+Servlet)

迫于课程结束,老师逼着让做课程设计,就简单花了一天的时间写了个使用dao设计模式的东西~ ~ ~顺带在这里讲解下dao设计模式 把写个这个东西的源代码放上来: http://download.csdn.net/detail/u010800530/8273915 先画一个图,这个图可能能够完整表达出dao设计模式的意思,但是可以在下边通过代码看出来: 一.完成登陆功能(未设计AJAX,等到完成显示列表的时候我们做AJAX): 首先,我们建立一个项目TestJSP 然后,我们写一个login.jsp

原生AJAX+jsp+servlet实现百度搜索框提示效果

我们这里使用HTML5的新特性datalist实现输入框的自动下拉提示,用datalist通过id与input关联起来,在搜索时就会出现下拉框.下面是HTML代码. <!-- 输入框 --> <input type="text" size="50" id="search" name="search" list="browser" onkeyup="search()" o

HTML,CSS,JavaScript,AJAX,JSP,Servlet,JDBC,Structs,Spring,Hibernate,Xml等概念

HTML: 即Hyper Text Markup Language,超文本标记语言. CSS: 层叠样式表,网页表现与内容分离的样式设计语言,相比于传统的HTML的表现而言,CSS能够对网页中对象的布局.字体.颜色等方面进行设置,并能够进行初步的交互设计. JavaScript: 基于浏览器端运行的脚本语言,无须服务器端支持,它是一种基于事件运行的编程语言,JavaScript编写的程序既可以内嵌在HTML代码中,也可以独立地以".js"格式的文件存在.JavaScript代码可以提高

【Servlet】Servlet3.0与纯javascript通过Ajax交互

这是一个老生常谈的问题,对于很多人来说应该很简单.不过还是写写,方便Ajax学习的后来者.虽然js.html是一个纯静态的页面,但是以下的程序必须挂在Tomcat服务器上,才能做到Ajax交互,否则看不出效果的.Eclipse for javaee注意把做好的工程挂在Tomcat上,才运行Tomcat.本工程除了JSP必须的Servlet包以外,无须引入其它东西.其实想直接用一个JSP页面完成这个工程的,但是现在搞JSP的,基本上没有人直接在.jsp文件中写东西了吧?后台动作都扔到.java里面

JavaScript Ajax 与服务器通信

XMLHttpRequest对象 -常用方法-: open("method","URL",是否异步默认为true,"用户名","密码") 设置进行异步请求目标的URL send(content); content可以是DOM对象的实例.输入流.字符串.null setRequestHeader("header","value") 为请求的HTTP头设置值 abort() 停止或放弃当前异