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. js时间的一些处理

    1.判断是否为同一天 function isSameFay(t) { return new Date(t).toDateString() === new Date().toDateString(); ...

  2. IO多路复用（select、poll、epoll）介绍及select、epoll的实现

    IO多路复用(select.poll.epoll)介绍及select.epoll的实现 IO多路复用中包括 select.pool.epoll,这些都属于同步,还不属于异步 一.IO多路复用介绍 1. ...

  3. 使用TCP的协议有哪些？使用UDP的协议有哪些？

    运行于TCP协议之上的协议: HTTP协议:超文本传输协议,用于普通浏览 HTTPS协议:安全超文本传输协议,身披SSL外衣的HTTP协议 FTP协议:文件传输协议,用于文件传输 POP3协议:邮局协 ...

  4. 10 Spring框架--基于注解的IOC配置

    1.工程环境搭建 2.基于注解的IOC配置 IOC注解的分类 (1)用于创建对象的 他们的作用就和在XML配置文件中编写一个<bean>标签实现的功能是一样的@Component: 作用: ...

  5. 卸载桌面产品，弹出错误框The Windows Installer service could not be accessed

    卸载程序报这个错误: https://helpdeskgeek.com/how-to/how-to-fix-the-windows-installer-service-could-not-be-acc ...

  6. adb常用命令总结

    针对移动端 Android 的测试, adb 命令是很重要的一个点,必须将常用的 adb 命令熟记于心, 将会为 Android 测试带来很大的方便,其中很多命令将会用于自动化测试的脚本当中. And ...

  7. C++Primer 5th Chap2 Variables and basic Types

    wchar_t,char16_t,char32_t用于拓展字符集 char和signed char并不一样,由编译器决定类型char表现上述两种中的哪一种 一般long的大小和int无二,如果超过in ...

  8. Django总结篇

    1.0 简述http协议和常用请求头 http协议: ( 基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)) HTTP协议是Hyper Text Transfer Pro ...

  9. gorm - postgresql 如何连接？

    上面是mysql

  10. Jenkins安装maven integration plugin失败解决方法

    最近装了一个jenkins准备搞一个自动化测试的持续集成,但是在安装maven integration这个插件时报错,试了几次都是失败! 错误原因如下: javadoc安装失败: java.io.IO ...