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. sonar:默认的扫描规则

    https://blog.csdn.net/liumiaocn/article/details/83550309 https://note.youdao.com/ynoteshare1/index.h ...

  2. 修改服务器时间以后 cookie无法保存

    修改了服务器时间以后发现,cookie无法保存.通过查看异步请求的响应头信息  Date是之前修改的信息,并不是当前的时间. header('Date: Mon, 17 Mar 2015 05:34: ...

  3. 关于最火爆的服务器Tomcat你真的了解吗？

    作为Apache 软件基金会的Jakarta 项目中的一个核心项目,Tomcat因技术先进.性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可,成为目前比较流行的Web 应 ...

  4. qmake, makefile, make是什么东东,makefile简介!

    qmake是一个协助简化跨平台开发的构建过程 的工具,Qt附带的工具之一 .qmake能够自动生成Makefile.Microsoft Visual Studio 专案文件 和 xcode 专案文件. ...

  5. vue中$router以及$route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...

  6. day41——数值类型、完整性约束

    day41 数值类型 整数类型 有符号的设置 mysql> create table t1(id tinyint); # 默认有符号,即数字前有正负号 无符号的设置 mysql> crea ...

  7. spark 预编译安装

    1.下载地址: http://mirrors.tuna.tsinghua.edu.cn/apache/spark/spark-3.0.0-preview/spark-3.0.0-preview-bin ...

  8. LOJ6300 博弈论与概率统计 组合、莫队

    传送门 如果在\(0\)以下之后仍然会减分,那么最后的结果一定是\(N-M\). 注意到如果在Alice分数为\(0\)时继续输,那么就相当于减少了一次输的次数.也就是说如果说在总的博弈过程中,Ali ...

  9. 使用mavan构建自定义项目脚手架

    首先抛出一个问题是为什么要构建自定义的脚手架,maven已经为了我么提供了很多脚手架,方便我们快速的创建一个普通java项目或者是web项目,然而在实际开发中,例如银行项目,大部分都是ssm架构,我们 ...

  10. iframe 边框(界面技术)

    一.iframe 的边框很难看,想去掉,使用CSS的border:none在IE(8)上没有,只能用iframe 自带属性frameBorder="0"来设置. 二.iframe与 ...