SpringMVC+Ajax+拼接html字符串实例代码

为什么写这个呢。因为在现在的网页中。单纯的同步传递数据已经变得非常少了。大多数都是通过Ajax异步来传递数据的。因此在这里用SpringMVC+Ajax做一个简单的小例子,同时辅助以拼接字符串显示。希望能为大家带来帮助。

本次案例的配置仍然是在上一篇SpringMVC的简单增删改查(SSM整合)的基础上再辅助配置Jackson的jar包。

服务器端

  @RequestMapping("/ajaxlist")
  @ResponseBody//(springmvc的Jackson注解,返回json字符串)
  public List<User> getUserList()
  {
    List<User> list =userService.findAll();
    return list;
  }

前端使用

 <body>
    <button id="testButton">异步传输</button>
    <div id="content"></div>
 </body>

Ajax请求并拼接字符串

<script type="text/javascript">
  $(function() {
    $("#testButton").click(function()
    {
      $.ajax(
      {
      url:"${pageContext.request.contextPath }/user/ajaxlist",
      type:'GET',
      dataType:'json',
      success:function(data)
      {
      //拼接字符串
        var html = "<table><tr><td>用户名</td><td>密码</td><td>昵称</td><td>电子邮箱</td></tr>";
        for(var i=0;i<data.length;i++)
        {
          html=html+"<tr>"+"<td>"+data[i].username+"</td>"+"<td>"+data[i].password+"</td>"+
          "<td>"+data[i].nickname+"</td>"+"<td>"+data[i].email+"</td>"+"</tr>";
        }
        html = html+"</table>";
        $("#content").append(html);
      }
    });
    });

  });
</script>

其实在写的过程中,我在用firebug调试的时候,发现jQuery的文件无法获取到, 我一直以为是路径问题,确定路径无误后我发现,是我静态资源映射没配置。配置静态资源映射后就OK了。

前端显示结果

当然这里显示得并不是太漂亮,如果需要美观一点。可以引入Bootstrap或者其他框架来美化样式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-03-10

Spring MVC前端与后端5种ajax交互方法【总结】

前端ajax与后端Spring MVC控制器有以下五种数据交互方式.(前台使用了dhtmlxGrid,后端使用了fastjson) 方式一 通过URL传参 通过URL挂接参数,如/auth/getUser?userid='6' 服务器端方法可编写为:getUser(String userid),也可新增其他参数如HttpSession, HttpServletRequest,HttpServletResponse,Mode,ModelAndView等. 方式二 单值传参 前台调用如: ajaxP

springmvc 发送ajax出现中文乱码的解决方法汇总

使用spingmvc,在JS里面通过ajax发送请求,并返回json格式的数据,从数据库拿出来是正确的中文格式,展示在页面上就是错误的??,研究了一下,有几种解决办法. 我使用的是sping-web-3.2.2,jar   方法一: 在@RequestMapping里面加入produces = "text/html;charset=UTF-8" @RequestMapping(value = "/configrole", method = RequestMethod

Springmvc ajax跨域请求处理方法实例详解

上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha

SpringMVC环境下实现的Ajax异步请求JSON格式数据

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

springMVC结合AjaxForm上传文件

最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用. 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 在spring-servlet.xml进行multipartResolver配置: <bean id="multipartResolver" class="org.springf

Spring MVC中Ajax实现二级联动的简单实例

今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody public Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException { String ReturnMessage = ""; //获取所有子类故障类型 List<F

spring mvc 和ajax异步交互完整实例代码

spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

Spring MVC+FastJson+Swagger集成的完整实例教程

基础部分 1. FastJson 简介 Fastjson是一个Java库,可用于将Java对象转换为JSON表示.它也可以被用来将一个JSON字符串转换成一个等效的Java对象.在转换速度上应该是最快的,几乎成为了项目的标配(在ajax请求和接口开发时一般都会用fastjson而不再使用jackson). GitHub: https://github.com/alibaba/fastjson (本地下载) 特性: 在服务器端和android客户端提供最佳性能 提供简单toJSONString()

Spring MVC+FastJson+hibernate-validator整合的完整实例教程

一:hibernate-validator 基础 1. 简介: 通过使用注解Annotations 给类或者类的属性加上约束(constraint),在运行期检查属性值的合法性. 2. 作用: 在API接口开发中参数校验是非常重要的事情,因为客户端很可能会少传参数,或者值不合法,甚至参数值是恶意的,所以对客户端传来的参数的合法性就必须要校验了,其中将参数值的校验规则通过注解的形式注解到属性上是一种比较优雅的方式. 3. 常用的约束注解 @Null 被注释的元素必须为 null @NotNull

Ajax异步请求技术实例讲解

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX不是新的编程语言,而是一种使用现有标准的新方法.ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. ajax是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换.ajax可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分

Django中使用jquery的ajax进行数据交互的实例代码

jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo

MVC+jQuery.Ajax异步实现增删改查和分页

本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; usin

Spring MVC中自定义拦截器的实例讲解

1. 引言 拦截器(Interceptor)实现对每一个请求处理前后进行相关的业务处理,类似于Servlet的Filter. 我们可以让普通的Bean实现HandlerIntercpetor接口或继承HandlerInterceptorAdapter类来实现自定义拦截器. 通过重写WebMvcConfigurerAdapter的addIntercetors方法来注册一个计算每一次请求的处理时间的拦截器. 2. 自定义拦截器的实现 2.1 定义拦截器 新建LogInterceptor类,并继承Ha

Spring MVC Mybatis多数据源的使用实例解析

项目需要从其他网站获取数据,因为是临时加的需求,在开始项目时没想到需要多数据源 于是百度了一下,发现只需要改动一下Spring 的applicationContext.xml文件和编写三个工具类就可以完美实现 applicationContext.xml <!-- 多数据源配置 --> <bean id="ds1" class="org.apache.commons.dbcp.BasicDataSource"> <property na

java 使用memcached以及spring 配置memcached完整实例代码

Memcached是一个高性能的分布式内存对象缓存系统,本文介绍了java 使用memcached以及spring 配置memcached完整实例代码,分享给大家 本文涉及以下内容: 1,要使用的jar包 2,java 使用memcached 3,spring 配置memcached 导入jar java_memcached-release_2.6.6.jar commons-pool-1.5.6.jar slf4j-api-1.6.1.jar slf4j-simple-1.6.1.jar 示例