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. [LeetCode] 548. Split Array with Equal Sum 分割数组成和相同的子数组

    Given an array with n integers, you need to find if there are triplets (i, j, k) which satisfies fol ...

  2. C# .NET 支付宝IOT小程序AES密钥解密

    实际测试 KEY 是 16个 byte,byte[] byteKEY = System.Convert.FromBase64String(key);     注意:是Convert.FromBase6 ...

  3. 【Luogu P2765】魔术球问题

    Luogu P2765 一开始看到这道题完全想不到怎么做,绞尽脑汁也想不到怎么去构造这个网络流模型. 于是查看了多篇题解--学习了多篇题解的讲解,终于找到了思路. 本文参考了洛谷 这一道题的题意并不难 ...

  4. 【转】Spring中@Async

    Spring中@Async 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实, ...

  5. Block chain 1_The Long Road to Bitcoin

    The path to Bitcoin is littered with the corpses of failed attempts. I've compiled a list of about a ...

  6. TP5 模型CURD

    ThinkPHP5的模型是一种对象-关系映射(Object / Relation Mapping ,简称 ORM)的封装,并且提供了简洁的ActiveRecord实现.一般来说,每个数据表会和一个“模 ...

  7. 手写IOC-SPRINGPMVC-CONNPOOL

    (一)  手写IOC思路 1.扫包,将所有class文件加载到内存,判断类上是否加了ExtService注解,有就添加入map中 ,  map<String ,Object>:  key是 ...

  8. Java基础笔试练习（十一）

    1.下面的方法,当输入为2的时候返回值是多少? public static int getValue(int i) { int result = 0; switch (i) { case 1: res ...

  9. vue --- axios拦截器+form格式请求体

    在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...

  10. Windows MySql增量备份、完整备份采坑之路

    1.前言 这周公司交给我一个任务,负责项目Mysql数据库的备份,因为项目上线后数据是一个大问题,出了什么问题数据才是最大的问题,备份这时候就显得尤为重要, 公司项目的思路是:在项目系统设置内可以勾选 ...