Exemple de code de chaîne HTML SpringMVC + Ajax + épissage-js tutoriel-php.cn

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

亚连

Libérer： 2018-05-22 15:57:48

original

1148 Les gens l'ont consulté

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

Copier après la connexion

Utilisation front-end

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

Copier après la connexion

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>

Copier après la connexion

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