serialize javascript array

问题:

I am using the dojo enhanced grid and the variable marked "myGrid" refers to the grid.

function addtocart() {
        $("#additem").click(function(){
            var myGrid = dojo.byId(dataGrid);
            var ids = [];
            var gridRow = myGrid.selection.getSelected();
            $.each( gridRow, function(i, l){
                ids.push(l.id);
            });
            var registcarturl = "${carturl}" + $("#regCart :selected").val();
            $.get(registcarturl, {instanceIds: ids}, function(data) {
                alert(data);
            });
        });
    }

I am not sure what the string for a serialized array should look like as I can dynamically build any string. I am trying to use the jquery get method as shown in the example

$.get("test.cgi", { name: "John", time: "2pm" },   function(data){     alert("Data Loaded: " + data);   });

I modified the function as follows

    function addtocart() {
        $("#additem").click(function(){
            var myGrid = dojo.byId(dataGrid);
            var ids = "[";
            var gridRow = myGrid.selection.getSelected();
            $.each( gridRow, function(i, l){
                ids = ids + "\"" +l.id +"\"";

                if(i != (gridRow.length -1)){
                    ids = ids + ",";
                };

            });
            ids = ids + "]";
            alert(ids);
            var registcarturl = "${carturl}" + $("#regCart :selected").val();
            $.get(registcarturl, {instanceIds: ids}, function(data) {
                alert(data);
            });
        });
    }

When my data gets to my java controller it tries to parse ["219" as a long and of course a NumberFormatException results. The javascript variable ids looks like this ["219","217","218","195"]

Can someone please offer some guidance.

回答1:

You can use JSON-js to serialize any JavaScript object or array to JSON.

回答2:

Just create an array of IDs that you pass to the $.get() method:

function addtocart() {
    $("#additem").click(function(){
        var myGrid = dojo.byId(dataGrid);
        var ids = [];
        var gridRow = myGrid.selection.getSelected();
        $.each( gridRow, function(i, l){
            ids[ids.length] = l.id;
        });
        alert(ids);
        var registcarturl = "${carturl}" + $("#regCart :selected").val();
        $.get(registcarturl, {instanceIds: ids}, function(data) {
            alert(data);
        });
    });
}

Notice that to push another index onto the array I used ids[ids.length] instead of .push. .push runs faster in new browsers but the former method works faster in older browsers.

回答3:

Ok so the solution was very very simple. Here it is.

    function addtocart() {
        $("#additem").click(function(){
            var myGrid = dojo.byId(dataGrid);
            var ids = [];
            var gridRow = myGrid.selection.getSelected();
            $.each( gridRow, function(i, l){
                ids[i] = l.id;
            });
            var registcarturl = "${carturl}" + $("#regCart :selected").val();
            $.get(registcarturl, {"modinstid[]": ids}, function(data) {
                alert(data);
            });
        });
    }

Look at the get request {"modinstid[]": ids} and the corresponding spring MVC controller is as follows.

@RequestMapping(value = "addtocart/{cart}", method = RequestMethod.GET) public @ResponseBody
String addtocart(@PathVariable("cart") Long cart, @RequestParam("modinstid[]") ArrayList<String> instances, Model uiModel) {...Action logic goes here...}

Look at the @RequestParam property of the action arguments