1. demo功能分析

    1. jquery 的js文件需要导入,json的三个文件需要导入,不然writeValueAsString 会转化成JsonArray(json 数组)失败
    2. $("#mytbody").html(result);相当innerHTML先清空后添加 ,并且注意对应下面的id,需要加 "#" !
    3. 在servelt中
      1. 　　 resp.setContentType("application/json;charset=utf-8"); //设置json字符流为utf-8
      2. PrintWriter out = resp.getWriter(); out.print() 中的内容就是服务器返回的内容 ,out里不要写(返回)其他的多余信息, 笔者不小心加上了一段辅助信息   " 
         out.print("服务器返回的内容: \n");

        "  ,然后找了大半天的bug! 毕竟,加上后,json就没法进行解析了!!

      3. jquery.post()的callback 是成功时的回调函数, 接受 out.print() 中的json内容,然后以html的形式进行显示
      4. api :  
      5. 数据库:没有, 数据只有两个简单的Users对象,组成一个ArrayList.
      6. EL表达式同样胜任.

  2. 工程组织

    1. 　　

  3. servlet 代码

    1. 　　

      public class Users {
      
    private int id;
      
    private String password,username;
      
   //   getter/setter........
      
}
      import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
      
import javax.servlet.annotation.WebServlet;
      
import javax.servlet.http.HttpServlet;
      
import javax.servlet.http.HttpServletRequest;
      
import javax.servlet.http.HttpServletResponse;
      
import java.io.IOException;
      
import java.io.PrintWriter;
      
import java.util.ArrayList;

      头文件

      @WebServlet("/demo")
      
public class DemoServlet extends HttpServlet {
      
    @Override
      
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      
        System.out.println("执行demo控制器............");

        Users users=new Users(); //建立pojo对象
      
        users.setId(1);
      
        users.setPassword("123456");
      
        users.setUsername("张三");

        Users users2=new Users(); //建立pojo对象2
      
        users2.setId(2);
      
        users2.setPassword("123456");
      
        users2.setUsername("李四");

        ArrayList<Users> list=new ArrayList();
      
        list.add(users);
      
        list.add(users2);

        ObjectMapper mapper = new ObjectMapper(); //将对象list转化为json字符串
      
        String result= mapper.writeValueAsString(list);

                            //请求头:MIME 格式;
      
        resp.setContentType("application/json;charset=utf-8"); //设置json字符流为utf-8
      
        PrintWriter out = resp.getWriter();
      
     //   out.print("服务器返回的内容: \n");
      
        out.println(result);

        out.flush();
      
        out.close();
      
    }
      
}

      测试/demo 控制器

  4. JQuery 代码

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
      
  <head>
      
    <title>$Title$</title>
      
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
      
    <script type="text/javascript">
      
        $(function () {
      
            $("a").click(function () {
      
                $.post("demo",{},function (data) {
      
                    var result="";
      
                    for(var i=0;i<data.length;i++){
      
                        result+="<tr>";
      
                        result+="<td>"+data[i].id+"</td>";
      
                        result+="<td>"+data[i].username+"</td>";
      
                        result+="<td>"+data[i].password+"</td>";
      
                        result+="</tr>";
      
                    }
      
                    //$("table").append(result);
      
                    //相当innerHTML先清空后添加
      
                    $("#mytbody").html(result);
      
                })
      
                return false;
      
            })
      
        });
      
    </script>
      
  </head>
      
  <body>
      
    <a href="demo">点击显示下面表单的详细信息</a>
      
    <br/>
      
    <br>
      
    <table border="1">
      
      <tr>
      
        <td>编号</td>
      
        <td>账号</td>
      
        <td>密码</td>
      
      </tr>
      
      <tbody id="mytbody"></tbody>
      
    </table>

  </body>
      
</html>

    4. 最后, jsp的EL表达式同样可以实现这个功能,个人感觉还更方便,一个setParameter ,另一个直接getParameter ,岂不更直接了断哉23333~~

      　　

Ajax -02 -JQuery+Servlet -实现页面点击刷出表格数据的更多相关文章

  1. H5 页面如何展示大量的表格数据

    H5 页面如何展示大量的表格数据 列数过多 图表化 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  2. JQuery Mobile - 解决页面点击时候，页眉和页脚消失问题！

    当点击页面时候,页眉和页脚会消失!解决方法,在页面和页脚中加入: data-quicklinks="true" 实际使用代码: <div data-role="pa ...

  3. jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

    这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...

  4. 前端点击下载excel表格数据

    <el-button type="primary" @click="downloadChartData" size="mini"> ...

  5. jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法

    最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...

  6. JavaWeb学习总结-05 Servlet 与页面的交互(02)

    一 模拟请求数据 为了测试方便,把请求 json,txt, xml,html格式的文件放到了公网上面,可以通过以下地址请求: http://wx.glab.cn/xpxiaowu4java/json/ ...

  7. JS+Ajax+Servlet:记录页面访问时间

    1.前端JS记录页面访问时间 1.1JQuery版本: <script type="text/javascript" src="js/jquery.min.js&q ...

  8. JSP／Servlet开发——第十章 Ajax与JQuery

    1. 认识Ajax: ◆在传统的 Web 应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应,如果前一个请求没有得到响应,则后一个请求就不能发送. ◆由于这是一种独占式的 ...

  9. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

随机推荐

  1. Java高级面试题整理（附答案）

    这是我收集的10道高级Java面试问题列表.这些问题主要来自 Java 核心部分 ,不涉及 Java EE 相关问题.你可能知道这些棘手的 Java 问题的答案,或者觉得这些不足以挑战你的 Java ...

  2. 【python开发】利用PIP3的时候出现的问题Fatal error in launcher: Unable to create process using '"'

    down voteaccepted I fixed my issue by... downloading Python 3 at the official website and installing ...

  3. jenkins回滚之groovy动态获取版本号

    grovvy调试: 部署路径确定下来, 每个服务写死,传参 服务名 + 环境 给版本服务返回版本信息: groovy取分支: def gettags = ("git ls-remote -h ...

  4. python random模块（14）

    random 模块包括返回随机数的函数,可以用于模拟或者任何产生随机输出的程序. 一.random模块常用函数介绍 random.random() — 生成一个从0.0(包含)到 1.0(不包含)之间 ...

  5. 使用命令进行Apache Kafka操作

    1.目标 我们可以在Kafka集群上执行几个Apache Kafka Operations .因此,在本文中,我们将详细讨论所有Apache Kafka操作.它还包括有助于实现这些Kafka操作的命令 ...

  6. jQuery的基础总结

    **本篇只列出零碎的jQuery基础知识点,个人记录自己的学习进度,无序排列,谨慎查看.** 1.jQuery入口函数的四种写法2.jQuery与JS遍历数组的区别3.jQuery符号冲突问题4.jQ ...

  7. poj 3744 题解

    题目 题意: $ yyf $ 一开始在 $ 1 $ 号节点他要通过一条有 $ n $ 个地雷的道路,每次前进他有 $ p $ 的概率前进一步,有 $ 1-p $ 的概率前进两步,问他不领盒饭的概率. ...

  8. docker（四）：集群swarm

    docker使用入门(四):集群swarm swarm是一组位于同一集群且运行docker的机器,用户可以通过swarm manager向swarm输入命令,swarm中的机器可以是虚拟机也可以是物理 ...

  9. Mybatis @Result注解的使用案例

    @Result注解的使用

  10. gitlab-runner 的 executors 之 docker

    gitlab-runner 的 executors 之 docker GitLab Runner 实现了许多执行程序,可用于在不同的场景中运行构建.所有执行程序分别为: SSH Shell Paral ...