$ajax的post请求提交方式:

Controller:


@RequestMapping("/emps")
@ResponseBody
public Msg getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
// 调用com.github.pagehelper.PageInterceptor包中方法
// 传入页码以及数据容量
PageHelper.startPage(pn, 8);
// 查询
List<Employee> emps = employeeservice.getAll();
// 将此封装交给页面,
PageInfo page = new PageInfo(emps, 5);
return Msg.success().add("pageInfo", page);
}

 
@ResponseBody:将所有获取的数据转换为json形式。
method = RequestMethod.GET:设置请求方式为GET
输入url显示json数据
 

前台接收,拼接语句

<script type="text/javascript">
var totalPagesUtil; //首页点击自动跳转第一页
$(function() {
to_page(1)
});
//===============================================================================
//分页条信息跳转函数
function to_page(pn) {
$.ajax({
url : "${page}/emps",
data : "pn=" + pn,
type : "GET",
success : function(result) {
//解析并显示员工
build_emps_table(result);
//解析并显示分页信息
build_page_info(result);
//解析并显示分页条
build_page_nav(result);
}
});
}
//===============================================================================
//员工表格
function build_emps_table(result) {
//清空上一次遗留到的数据,给下一次请求
$("#emps_table tbody").empty();
//调出员工数据
var emps = result.userMsg.pageInfo.list;
//jquery遍历
$.each(emps, function(index, item) {
//拼接一列
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(item.gender);
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>").append(item.department.deptName);
//按钮拼接
var editBtnTd = $("<button></button>").addClass(
"btn btn-primary btn-sm edit_Btn").append(
$("<span></span>").addClass("glyphicon glyphicon-pencil"))
.append("edit");
//为按钮绑定属性
editBtnTd.attr("editBtn_id", item.empId); var deleBtnTd = $("<button></button>").addClass(
"btn btn-danger btn-sm dele_Btn").append(
$("<span></span>").addClass("glyphicon glyphicon-trash"))
.append("delete");
var editordeleTd = $("<td></td>").append(editBtnTd).append(" ")
.append(deleBtnTd);
//append方法执行完以后返回原来的元素
$("<tr></tr>").append(empIdTd).append(empNameTd).append(genderTd)
.append(emailTd).append(deptNameTd).append(editordeleTd)
.appendTo("#emps_table");
});
}
//===============================================================================
//分页信息显示
function build_page_info(result) {
//清空上一次遗留到的数据,给下一次请求
$("#page_info_current").empty();
$("#page_info_totalpage").empty();
$("#page_info_totalcount").empty(); $("#page_info_current").append("当前第").append(
"<span>" + result.userMsg.pageInfo.pageNum + "</span>").append(
"页");
$("#page_info_totalpage").append("共").append(
"<span>" + result.userMsg.pageInfo.pages + "</span>").append(
"页");
$("#page_info_totalcount").append("共").append(
"<span>" + result.userMsg.pageInfo.total + "</span>").append(
"条数据");
//总记录数
totalPagesUtil = result.userMsg.pageInfo.total;
//当前页数
currentPage = result.userMsg.pageInfo.pageNum;
}
//===============================================================================
//分页条显示
function build_page_nav(result) {
//清空上一次遗留到的数据,给下一次请求
$("#page_li").empty();
var ul = $("<ul></ul>").addClass("pagination");
//首页
var firstPageLi = $("<li></li>").append(
$("<a></a>").append("首页").attr("href", "#"));
//上下页图标
var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
//判断是否上一页,禁用
if (result.userMsg.pageInfo.hasPreviousPage == false) {
prePageLi.addClass("disabled");
} else {
//不禁用时放行跳转
prePageLi.click(function() {
to_page(result.userMsg.pageInfo.pageNum - 1);
});
}
firstPageLi.click(function() {
to_page(1);
}); //=============================================================================== var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
//判断是否下页。禁用
if (result.userMsg.pageInfo.hasNextPage == false) {
nextPageLi.addClass("disabled");
} else {
//不禁用时放行跳转
nextPageLi.click(function() {
to_page(result.userMsg.pageInfo.pageNum + 1);
});
}
//末页
var lastPageLi = $("<li></li>").append(
$("<a></a>").append("末页").attr("href", "#"));
lastPageLi.click(function() {
to_page(result.userMsg.pageInfo.pages);
})
//===============================================================================
ul.append(firstPageLi).append(prePageLi);
//遍历连续页
$.each(result.userMsg.pageInfo.navigatepageNums, function(index, item) {
var numLi = $("<li></li>").append($("<a></a>").append(item));
//点击连续也跳转
numLi.click(function() {
to_page(item)
})
//判断是否当前页显示状态
if (result.userMsg.pageInfo.pageNum == item) {
numLi.addClass("active");
}
ul.append(numLi);
})
//拼接下一页等
ul.append(nextPageLi).append(lastPageLi);
var navEle = $("<nav></nav>").append(ul);
//拼接总分页到div中
navEle.appendTo("#page_li");
}

通过使用JS(jquery)获取并拼接sql语句

<!-- 主页显示 -->
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1 align="center">
<i
class="layui-icon layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
style="font-size: 30px;"></i> IntegrationSSM
</h1>
</div>
</div> <!-- 按钮 -->
<div class="row">
<div class="col-md-4">
<!-- 搜索 -->
<div class="input-group">
<input type="text" class="form-control"
placeholder="Search name or email or department..."> <span
class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
search!
</button>
</span>
</div>
</div> <!-- 中间部分 -->
<div class="col-md-4"></div> <!-- 按钮 -->
<div class="col-md-4">
<button type="button" class="btn btn-primary" id="btn_add_index">
<i class="layui-icon layui-icon-add-1"></i> add
</button>
<button type="button" class="btn btn-danger">
<!-- <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> -->
<i class="layui-icon layui-icon-close"></i> delete
</button>
</div>
</div>
<br> <br> <br> <!-- 表格 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>grader</td>
<td>email</td>
<td>department</td>
<td>operator</td>
</tr>
</thead>
<tbody> </tbody>
</table>
</div>
</div> <!-- 分页 -->
<div class="row">
<div class="col-md-8" id="page_li"></div> <div class="col-md-4">
<div class="btn btn-default btn-lg btn-sm" disabled="disabled"
id="page_info_current">
<!-- 不可点击 --> </div>
<div class="btn btn-default btn-lg btn-sm" disabled="disabled"
id="page_info_totalpage">
<!-- 不可点击 --> </div>
<div class="btn btn-default btn-lg btn-sm" disabled="disabled"
id="page_info_totalcount">
<!-- 不可点击 --> </div>
</div>
</div>
</div>
拼接完成解决完相应bug,显示以下信息

$以上只含部分关键代码,演示如何使用ajax和json。

代码中包含 bootstrap  layui 框架的内容 

 
 

Ajax GET的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  3. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  4. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

  7. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  8. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  9. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

  10. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

随机推荐

  1. js操作一般文件和csv文件

    js操作一般文件和csv文件 将文本文件读成字符串 <input type="file" id="upload"> document.getElem ...

  2. java成神之——网络编程基本操作

    网络编程 获取ip UDP程序示例 TCP程序 结语 网络编程 获取ip InetAddress id = InetAddress.getLocalHost(); // InetAddress id ...

  3. Ubuntu下编写C语言程序

    新建C文件,新建一个文件用touch,新建文件夹用mkdir. 打开文本编辑器,编辑C文件,命令用gedit xxx.C 编写C程序,Ctrl+S保存 编译运行 1.gcc命令是编译 -o是可选项 是 ...

  4. ACCESS中如何比较日期和时间,使用DateDiff函数

    DateDiff,语法如下:DateDiff( 间隔字符, 日期1, 日期2 [,firstdayofweek[, firstweekofyear]])一般使用 DateDiff( 间隔字符, 日期1 ...

  5. a标签:鼠标指针变成文本输入图形

    今天我在使用a标签的时候,鼠标放在上面的时候总是显示文本输入的图形,不是小手的形状,找了好久的原因才发现由于我给它绑定了一个click事件,在事件里面进行了跳转,然后把 href ="#&q ...

  6. Hadoop之HDFS(二)HDFS基本原理

    HDFS 基本 原理 1,为什么选择 HDFS 存储数据  之所以选择 HDFS 存储数据,因为 HDFS 具有以下优点: 1.高容错性 数据自动保存多个副本.它通过增加副本的形式,提高容错性. 某一 ...

  7. 02-nginx信号量

    刚才完了nginx的编译,nginx的编译还是挺简单的.控制nginx:重启.关闭.只有孤零零的一个二进制文件nginx 通过信号来控制它,Linux操作系统进程与进程之间通过信号来通信.荷兰的一位计 ...

  8. jmeter beanshell

    //获取返回数据 String json = prev.getResponseDataAsString(); ///加入变量vars.put("restr",json); //获取 ...

  9. 六.使用list和tuple

    list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: classmates = ...

  10. opencv3读取视频并保存为图片

    #include <iostream> #include <vector> #include <opencv2/opencv.hpp> using namespac ...