Rumah > Artikel > hujung hadapan web > SpringMVC+Ajax+拼接html字符串实例代码

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

亚连asal: 2018-05-22 15:57:481208semak imbas

这篇文章主要介绍了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> 
    <p id="content"></p> 
 </body>

Ajax请求并拼接字符串

<script type="text/javascript">
  $(function() {
    $("#testButton").click(function()
    {
      $.ajax(
      {
      url:"${pageContext.request.contextPath }/user/ajaxlist",
      type:&#39;GET&#39;,
      dataType:&#39;json&#39;,
      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了。

前端显示结果

上面是我整理给大家的，希望今后会对大家有帮助。

php+ajax实现发起流程和审核流程的方法

js封装ajax功能函数实现步骤详解

PHP+Mysql+Ajax实现淘宝客服阿里旺旺聊天功能(前台页面)的方法

Atas ialah kandungan terperinci SpringMVC+Ajax+拼接html字符串实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ajax基础与登入教程Artikel seterusnya：ECSHOP中实现ajax弹窗登录功能

Artikel berkaitan

Lihat lagi