SpringMVC+Ajax+splicing html string example code-JS Tutorial-php.cn

SpringMVC+Ajax+splicing html string example code

亚连

Release： 2018-05-22 15:57:48

Original

1213 people have browsed it

This article mainly introduces the SpringMVC Ajax splicing html string example code, which has certain reference value. Interested friends can refer to it.

Why write this. Because in the current web page. Simply passing data synchronously has become very rare. Most of them pass data asynchronously through Ajax. So here is a simple small example using SpringMVC Ajax, and at the same time assisting in splicing string display. Hope it helps everyone.

The configuration of this case is still based on the simple addition, deletion, modification and check (SSM integration) of SpringMVC in the previous article and then assists in configuring the Jackson jar package.

Server side

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

Copy after login

Front end usage

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

Copy after login

Ajax request and splice string

<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>

Copy after login

In fact, during the writing process, I When debugging with firebug, I found that the jQuery file could not be obtained. I always thought it was a path problem. After confirming that the path was correct, I found that my static resource mapping was not configured. After configuring static resource mapping, it is OK.

Front-end display results

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

php ajaxMethods to implement the initiation process and review process

##js EncapsulationajaxDetailed explanation of the steps to implement the functional function

##PHP Mysql Ajax method to implement Taobao customer service Aliwangwang chat function (front page)

The above is the detailed content of SpringMVC+Ajax+splicing html string example code. For more information, please follow other related articles on the PHP Chinese website!