Maison > Article > interface Web > Exemple de code de chaîne HTML SpringMVC + Ajax + épissage

Exemple de code de chaîne HTML SpringMVC + Ajax + épissage

亚连original: 2018-05-22 15:57:481214parcourir

Cet article présente principalement un exemple de code de chaîne HTML SpringMVC+Ajax+splicing, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Pourquoi écrivez-vous ceci ? Parce que dans la page Web actuelle. La simple transmission de données de manière synchrone est devenue très rare. La plupart d'entre eux transmettent des données de manière asynchrone via Ajax. Par conséquent, voici un petit exemple simple utilisant SpringMVC+Ajax, et en même temps, il est assisté par l'affichage de la chaîne d'épissage. J'espère que cela aide tout le monde.

La configuration de ce cas est toujours basée sur le simple ajout, suppression, modification et vérification (intégration SSM) de SpringMVC dans l'article précédent, puis aide à la configuration du package jar Jackson.

Côté serveur

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

Utilisation front-end

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

Requête Ajax et chaîne d'épissage

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

est en fait En écrivant Au cours du débogage avec Firebug, j'ai constaté que le fichier jQuery ne pouvait pas être obtenu. J'ai toujours pensé que c'était un problème de chemin. Après avoir confirmé que le chemin était correct, j'ai constaté que mon mappage de ressources statiques n'était pas configuré. . Après avoir configuré le mappage des ressources statiques, tout va bien.

Résultats de l'affichage frontal

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. l'avenir.

Articles Liés

Voir plus