前景セット一覧表示HTMLへのデータ転送の後端（表）
キーワード：フロントとバックオフィスのデータ転送問題Webプロジェクト
Webプロジェクトを学習するプロセスでは、我々は確かにフロントとバックオフィスのデータ交換の問題に遭遇します。私は長い間考えて質問し、それによって今日まとめます。ブロガーが限られているため、不適切な場合は、私に多くのことを修正してください,,ナンセンスは、ビジネスに言われていません。
、HTMLページは、AJAXによってHTTPリクエストを送ります
次のように1、フロントには、通常のHTMLページを終了します。
（ページには、jqueryのを紹介するフォームページがあります）
図2に示すように、AJAXを介して送信要求
。window.onload 1（requestData関数（）{
2 $アヤックス（{
3 URL： "アクセスするアドレス"、
4型： "POST"、
5データ型：。 "JSON"、
6つの成功：関数（データ）{
7 / *このコードは、送信要求がAJAX成功である方法後に実行される* /
8 showData（データ）; //我々がデータのみを表示します。
9}。
10エラー：関数（MSG）{
11アラート（ "AJAX接続例外：" + MSG。 ）;
12}
13}）;
14}）。
3、バックグラウンドデータ
@RequestMapping 1（値= "/ queryAllStudent"）。
2公共ボイドクエリ（HttpServletResponseのRESP）{
3試み{。
4 / *リストは、学生の多くのオブジェクトのセットに格納される* /。
5一覧<学生>学生UserService.getAllStudentInfo =（）。が。
6 / *セットリストは、JSONオブジェクトにロードされる* /
7 = JSONArray.fromObjectにJSONArrayデータ（学生）;。
。8の横//データを送信
9 / *エンコーディングを設定する歪みの問題を防止するために、* /
10 resp.setCharacterEncoding（「UTF -8「）;
11 / *取得した出力ストリーム* /
12のPrintWriter respWritter resp.getWriter =である（）;
13である/ *伝送のtoString JSON形式のオブジェクト* /（後）
14 respWritter.append（data.toString（））。
15}キャッチ（例外e）{
16 e.printStackTrace（）;
17}
18}
学生{publicクラス1。
2プライベートIDはint; // ID
。3プライベート文字列名; //名前
4プライベート文字列のパスワード; //パスワード
。5
。6 //が設定方法は省略するます。。。
7}
（表形式で）4、前面表示データ
表示データ1つの//
2 showData機能（データ）{
3 VARのSTRを= "";スプライシングのために定義//ストリング
。4（VAR I = 0;私はdata.lengthを<; Iは++）{
5 //スプライシングテーブル。行と列
6 STR = "<TR> < TD>" +データ[I] .nameの+ "</ TD> <TD>" + DATA [i]がみましょう。パスワード+ "</ TD> </ TR>" ;
テーブルに追加7 //
8 $（ "＃タブ"）アペンド（STR）;.}
10}
5.これは、データの送信を完了します
第二に、データ転送処理
前台(html)发送ajax请求 --> 后台servlet中接受到请求，然后响应数据(来自数据库或其他) --> 前台（HTML）
ajax接受数据，处理数据(以表格显示).
最后测试一下显示效果
谢谢！
关键字：web项目中前后台数据传递问题
在学习web项目的过程中，我们肯定会遇到前后台数据交换问题。这个问题我也思考了很久，今天借此总结一下。由于博主水平有限，如有不当之处，还请大家多多指正，，废话不所说进入正题。
一、HTML页面通过ajax发送http请求
1，前端有个普通的HTML页面，如下。
（页面引入了jquery，页面有个表格）
2，通过ajax发送请求
1 window.onload(function requestData(){
2 $.ajax({
3 url: "要访问的地址",
4 type: "post",
5 dataType: "json",
6 success: function(data){
7 /*这个方法里是ajax发送请求成功之后执行的代码*/
8 showData(data);//我们仅做数据展示
9 },
10 error: function(msg){
11 alert("ajax连接异常："+msg);
12 }
13 });
14 });
3，后台的数据
1 @RequestMapping(value="/queryAllStudent")
2 public void query(HttpServletResponse resp) {
3 try {
4 /*list集合中存放的是好多student对象*/
5 List<Student> students = userService.getAllStudentInfo();
6 /*将list集合装换成json对象*/
7 JSONArray data = JSONArray.fromObject(students);
8 //接下来发送数据
9 /*设置编码，防止出现乱码问题*/
10 resp.setCharacterEncoding("utf-8");
11 /*得到输出流*/
12 PrintWriter respWritter = resp.getWriter();
13 /*将JSON格式的对象toString()后发送*/
14 respWritter.append(data.toString());
15 } catch (Exception e) {
16 e.printStackTrace();
17 }
18 }
1 public class student {
2 private int id;//id
3 private String name;//姓名
4 private String password;//密码
5
6 //省略get set方法。。。
7 }
4，前台展示数据（表格形式）
1 //展示数据
2 function showData(data) {
3 var str = "";//定义用于拼接的字符串
4 for (var i = 0; i < data.length; i++) {
5 //拼接表格的行和列
6 str = "<tr><td>" + data[i].name + "</td><td>" + data[i].password + "</td></tr>";
7 //追加到table中
8 $("#tab").append(str); }
10 }
5.これは、データの送信を完了します
第二に、データ転送処理
フロント（HTML）AJAXリクエストを送信する - >バックグラウンドサーブレットは、要求と応答データを受信する（または別のデータベースから） - >フロント（HTML）
データ受信AJAX 処理データを（表に示します）。
最後に、テスト結果は
ありがとうございます！