jqueryプログレッシブformフォームはajaxを使って提出した後に処理して返したjsonデータを返します。

4606 ワード

1、Json文字列を返します。

/** */
    protected void writeJson(String json) {
        PrintWriter pw = null;
        try {
            servletResponse.setContentType("text/plain;charset=UTF-8");
            pw = servletResponse.getWriter();
            pw.write(json);
            pw.flush();
            pw.close();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (pw != null) {
                pw.close();
            }
        }
    }
2、evalを通じて返したjson文字列をJsonオブジェクトに変換する:

$.ajax({
        data:{
            "shipmmsi":shipmmsi,
            "shipname":shipname
        },
        url : "shipbk/findShipMMSIAndName.do",
        async : true,
        type : "POST",
        success : function(data) {
            var ships = eval('(' + data + ')');
            $("#bindShipmmsiDiv table tbody").html("");
            if(ships!=null){
                if(ships.length){
                    $("#bindShipmmsiDiv").show();
                    var trs="";
                    for(var i=0;i<ships.length;i++){
                        trs+="<tr><td>"+ships[i].mmsi+"</td><td>"+ships[i].vesselName+"</td></tr>";
                    }
                    $("#bindShipmmsiDiv table tbody").append(trs);
                    // tr
                    $("#bindShipmmsiDiv table tbody tr").click(function(){
                        $(this).addClass('select_tr').siblings().removeClass('select_tr');
                    });
                    $("#bindShipmmsiDiv table tbody tr").dblclick(function(){
                        fillShipMMSIAndName(this);
                        $("#bindShipmmsiDiv").hide();
                    });
                }
            }
        }
    });
3、jqueryの$(「form」).serialize()によりフォームのデータを順番に並べてバックグラウンドに提出することができますので、ajaxによりフォームを操作して、リターンデータを処理することができます。

$.ajax({
  url : 'deliveryWarrant/update.do',
  data : $('#myform').serialize(),
  type : "POST",
  success : function(data) {
    var res = eval('(' + data + ')');
    if (res && res.success == true) {   
      alert(res.message);
    location.href="/godownWarrant/findToDeliveryWarrant.do?godownWarrant.code="+$("#myform input[name=godownWarrant\\.code]").val();
    } else {
      alert(res.message);
    }
  }
});
4、文字化け防止の処理方法:
jspページ:charset:utf-8
servlet:utf-8
filter:utf-8
PrintWriter out=reponse.get Writer()の前に一言付け加える。
レスポンス.set CharcterEncocding(「UTF-8」)は文字化けの問題を解決できます。
ただし、必ずPrintWwriteを宣言する前に置くことを忘れないでください。
つまり、フロントインターフェース、javaファイル、データベースとデータベースの接続はすべて統一コードを採用しています。
PS:Json操作については、ここでいくつかの実用的なjsonオンラインツールを紹介します。
オンラインJSONコード検査、検査、美化、フォーマットツール:
http://tools.jb51.net/code/json
JSONオンラインフォーマットツール:
http://tools.jb51.net/code/jsonformat
オンラインXML/JSON相互変換ツール:
http://tools.jb51.net/code/xmljson
jsonコードはオンラインフォーマット/美化/圧縮/編集/変換ツール:
http://tools.jb51.net/code/jsoncodeformat
オンラインJson圧縮/変換ツール:
http://tools.jb51.net/code/json_yasuo_トラッキング
C言語スタイル/HTML/CSS/Jsonコードフォーマット美化ツール:
http://tools.jb51.net/code/ccode_同前css_Json