How SpringMVC+Ajax implements splicing html strings-JS Tutorial-php.cn

How SpringMVC+Ajax implements splicing html strings

php中世界最好的语言

Release： 2018-04-02 11:10:53

Original

1729 people have browsed it

This time I will show you how SpringMVC+Ajax implements splicing html stringsString, what are the precautions for SpringMVC+Ajax to implement splicing html strings, the following is a practical case, Let’s take a look.

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. Therefore, here is a simple small example using SpringMVC+Ajax, and at the same time, it is used to assist 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

The front end uses

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

Copy after login

Ajax to request and splice strings

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

Copy after login

In fact, during the writing process, when I was 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 it was me. Static resource mapping is not configured. After configuring static resource mapping, it is OK.

Front-end display results

Of course, the display here is not too beautiful, if it needs to be more beautiful. You can introduce Bootstrap or other frameworks to beautify the style.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!