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

Home

Web Front-end

JS Tutorial

SpringMVC+Ajax+splicing html string example code

亚连

May 22, 2018 pm 03:57 PM

html string

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn