ajax与Servlet

Posted 2020-09-25 @想太多先森

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

以上是关于ajax与Servlet的主要内容，如果未能解决你的问题，请参考以下文章

Servlet 与 Ajax 交互一直报status=parsererror

filter与servlet

ajax与Servlet

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

代码适用于与单个 html 文件不同的堆栈片段

原生Ajax与JSON实践二（Post请求）