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. 【SSH进阶之路】Spring的IOC逐层深入——为什么要使用IOC[实例讲解]（二）

    上篇博客[SSH进阶之路]Spring简介,搭建Spring环境——轻量级容器框架(一),我们简单的介绍了Spring的基本概念,并且搭建了两个版本的Spring开发环境,但是我们剩下了Spring最 ...

  2. Activiti6.0流程编辑器汉化教程（en.json文件汉化）

    { "GENERAL": { "MAIN-TITLE": "Activiti", "ERROR": { "GE ...

  3. VS Code 编译C++

    1.安装VS Code 2.安装插件 在左侧插件库 必须: c/c++ 插件 非必需: C++ Intellisense Include Autocomplete 3.安装编译调试环境mingw Mi ...

  4. window10 phpstudy2018 mysql服务重启之后自动停止

    使用phpstudy集成环境开发php,但是可能版本太旧,导致有些语法用不了.所以决定删掉,再下一个新版的. 把phpstudy退出之后,就直接把phpstudy文件夹删除了.发现它并不能删除成功.然 ...

  5. svn服务安装教程

    https://www.cnblogs.com/yankyblogs/p/7282752.html

  6. 修复一个mysqlbinlog_flashback不支持json格式问题

    修复一个mysqlbinlog_flashback不支持json格式问题 , 有问题可以反馈留言 , 如下盘: 最简单的例子为 python mysqlbinlog_back.py --host=&q ...

  7. Java基础之（四）HashMap（jdk10）

    JDK1.7以前的HashMap jdk1.7中,当冲突时,在冲突的地址上生成一个链表,将冲突的元素的key,通过equals进行比较,相同即覆盖,不同则添加到链表上,此时如果链表过长,效率就会大大降 ...

  8. MySQL中主键id不连贯重置处理办法

    MySQL中有时候会出现主键字段不连续,或者顺序乱了,想重置从1开始自增,下面处理方法 先删除原有主键,再新增新主键字段就好了 #删除原有自增主键 ALTER TABLE appraiser_info ...

  9. Go语言 (指针)

    区别于C/C++中的指针,Go语言中的指针不能进行偏移和运算,是安全指针. 要搞明白Go语言中的指针需要先知道3个概念:指针地址.指针类型和指针取值. Go语言中的指针 Go语言中的函数传参都是值拷贝 ...

  10. CF778D Parquet Re-laying 构造

    传送门 如果\(2 \not\mid M\),就把两个图折一下,把\(N\ M\)互换,这样就可以保证\(2 \mid M\). 因为操作可逆,所以我们可以选择一个中间状态,把起始和终点状态都变成这个 ...