Jquery serializes the form form and processes the returned json data after it is submitted using ajax

  • 2020-03-30 02:10:15
  • OfStack

1. Return json string:



    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. Convert the returned json string into a json object through eval:


$.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);
                    //Register the click event for 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. With jquery's $("form").serialize(), you can serialize and submit the form's data to the background, so you can manipulate the form and process the returned data with 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. Methods to prevent garbled codes:

JSP page: charset: utf-8
The servlet: utf-8
The filter: utf-8
Add a sentence before PrintWriter out = response.getwriter ()
The response. SetCharacterEncoding (" utf-8 ") can solve the problem of the statement.
Just remember to do this before declaring PrintWwrite.

In short, the front interface, Java files, database and database connection are unified coding, will not appear messy code and so on

PS: about json operation, here again for you to recommend a few more practical json online tools for your reference:

Online JSON code verification, verification, beautification, formatting tools:
(link: http://tools.jb51.net/code/json)

JSON online formatting tool:
(link: http://tools.jb51.net/code/jsonformat)

Online XML/JSON interconversion tool:
(link: http://tools.jb51.net/code/xmljson)

Json code online formatting/beautification/compression/editing/conversion tools:
(link: http://tools.jb51.net/code/jsoncodeformat)

Online json compression/escape tool:

(link: http://tools.jb51.net/code/json_yasuo_trans)

C language style /HTML/CSS/json code format beautification tool:
(link: http://tools.jb51.net/code/ccode_html_css_json)


Related articles: