ホームページ > 記事 > ウェブフロントエンド > SpringMVC+Ajax+HTML文字列の結合サンプルコード
SpringMVC+Ajax+HTML文字列の結合サンプルコード
- 亚连オリジナル
- 2018-05-22 15:57:481208ブラウズ
この記事では主に 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>
実際、執筆プロセス中、私は firebug を使用していましたデバッグ中に、jQuery ファイルを取得できないことがわかり、パスの問題だとずっと思っていましたが、パスが正しいことを確認したところ、静的リソース マッピングが設定されていないことがわかりました。静的リソースマッピングを設定すればOKです。
フロントエンドの表示結果
上記は、皆様の参考になれば幸いです。
関連記事:
PHP+ MySQL+ Ajaxが淘宝網顧客サービスAliwangwanを実装へ チャット機能（フロントページ）の使い方
以上がSpringMVC+Ajax+HTML文字列の結合サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。