ホームページ > ウェブフロントエンド > jsチュートリアル > SpringMVC+Ajax が HTML 文字列のスプライシングを実装する方法

SpringMVC+Ajax が HTML 文字列のスプライシングを実装する方法

php中世界最好的语言
リリース: 2018-04-02 11:10:53
オリジナル
1705 人が閲覧しました

今回は、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>
ログイン後にコピー
実際、書き込みプロセス中、

firebugでデバッグしていたときに、 jQuery ファイルを取得できませんでした。はい、パスの問題だとずっと思っていましたが、パスが正しいことを確認したところ、静的リソース マッピングが設定されていないことがわかりました。静的リソースマッピングを設定すればOKです。

フロントエンドの表示結果

もちろん、ここでの表示は、より美しくする必要がある場合には、あまりにも美しいわけではありません。

Bootstrap やその他のフレームワークを導入して、スタイルを美しくすることができます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

画像とテキストの Ajax ページング クエリの詳細な説明

プロジェクトでの Ajax リクエストの使用方法

以上がSpringMVC+Ajax が HTML 文字列のスプライシングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート