Comment SpringMVC+Ajax implémente l'épissage des chaînes HTML-js tutoriel-php.cn

Comment SpringMVC+Ajax implémente l'épissage des chaînes HTML

php中世界最好的语言

Libérer： 2018-04-02 11:10:53

original

1702 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser SpringMVC+Ajax pour épisser des chaînes HTML, et quelles sont les précautions pour épisser des chaînes HTML à l'aide de SpringMVC+Ajax. cas pratique. Jetons un coup d’oeil.

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

Le front-end utilise

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

Copier après la connexion

Requête Ajax et concaténation de chaînes

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

Copier après la connexion

En fait, pendant le processus d'écriture, lorsque je débogais avec firebug, j'ai découvert que le fichier jQuery ne pouvait pas être obtenu. J'ai toujours pensé que c'était un. problème de chemin, je me suis donc assuré que le chemin était correct. Plus tard, j'ai découvert 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

Bien sûr, l'affichage ici n'est pas trop beau, s'il doit être plus beau . Vous pouvez introduire Bootstrap ou d'autres frameworks pour embellir le style.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'image et du texte de la requête de pagination ajax

Comment utiliser la requête ajax dans le projet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!