今回は、SpringMVC+Ajax を使用して HTML文字列を結合する方法と、SpringMVC+Ajax で HTML 文字列を結合する際の注意事項を紹介します。実際のケースを見てみましょう。
なぜこれを書いているのですか?なぜなら、現在のWebページにあるからです。単純にデータを同期的に渡すことは非常にまれになりました。それらのほとんどは、Ajax 経由でデータを非同期に渡します。したがって、ここでは SpringMVC+Ajax を使用し、同時に文字列表示を結合することによって支援される簡単な小さな例を示します。皆さんのお役に立てれば幸いです。 このケースの構成は、以前の記事の SpringMVC の単純な追加、削除、変更、チェック (SSM 統合) に基づいており、その後、Jackson jar パッケージの構成を支援します。サーバー側
@RequestMapping("/ajaxlist") @ResponseBody//(springmvc的Jackson注解,返回json字符串) public List<User> getUserList() { List<User> list =userService.findAll(); return list; }
フロントエンドは
<body> <button id="testButton">异步传输</button> <p id="content"></p> </body>
Ajaxを使用して文字列をリクエストし、結合します
<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>
フロントエンドの表示結果
もちろん、ここでの表示は、より美しくする必要がある場合には、あまりにも美しいわけではありません。Bootstrap やその他のフレームワークを導入して、スタイルを美しくすることができます。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:以上がSpringMVC+Ajax が HTML 文字列のスプライシングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。