ajaxでバックエンドデータを受け取りhtmlページに表示する

Javaコード

 PrintWriter out=response.getWriter(); //クライアントに文字データを送信
 response.setContentType("text/text"); //リクエストおよびレスポンスの内容タイプおよびエンコード方法を設定
 response.setCharacterEncoding("UTF-8");
 JSONArray json = JSONArray.fromObject(newsList); //newsListオブジェクトをjsonオブジェクトに変換
 String str = json.toString(); //jsonオブジェクトを文字列に変換
 out.write(str); //str文字列をフロントエンドに送信 

　

Ajaxコード

 $(document).ready(function() {
 $.ajax({
 url : "newsservlet",//リクエストアドレス
 dataType : "json",//データ形式 
 type : "post",//リクエスト方式
 async : false,//非同期リクエストかどうか
 success : function(data) { //成功して送信する方法
 var html = "";
 for(var i=0;i<data.length;i++{ //data配列を巡回する
 var ls = data[i]; 
 html +="<li><a href='second page text.html#63;newsid="+ls.news_id+"'class='infNews_word_a'><span>"+ls.news_name+"</span></a><span class='date'>"+ls.news_time+"</span></li>";
 }
 $("#ulul").html(html); //htmlページ内のid=ululのタグにhtml内容を表示する
 },
)
)

HTML ページ

<ul id="ulul"></ul>

ajax では、"#"はタグのidを表し、"."はタグのclassを表します。

Java バックエンドで、リクエストおよびレスポンスの内容タイプおよびエンコーディング方式は、json オブジェクトを文字列に変換する前に書かなければなりません。それをしないと、json が乱码になります。

これで本文のすべての内容が終わります。本文の内容が皆様の学習や仕事に役立つことを願っています。また、呐喊教程！を多くのサポートをお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、アップロードされた内容であり、本サイトは所有権を持ちません。また、人間による編集は行われておらず、関連する法的責任も負いません。著作権侵害を疑われる内容が見つかりましたら、メールを送信してください：notice#oldtoolbag.com（メール送信時、#を@に変更してください。報告を行い、関連証拠を提供してください。一旦確認がとれましたら、本サイトは即座に侵害を疑われる内容を削除します。）