Question

//这是jsp页面代码：

gridControlService.getGridStructure($stateParams.id).then(function (result)       
{
    $scope.mainGridOptions = result.data.Fields;
});
// and remove the line $scope.mainGridOptions = fields;

//这是控制器：

function doAjaxPost()
{
    var City=$('#City').val();
    window.alert(City,+"New City Created");
    $.ajax
    ({
    type: "GET",
    async : true,
    url: "http://localhost:8080/OnlineStore/kmsg/grocery/AddCity",
    data: "City=" +City,
    }).done(function( data, type, xml)
            {
                    console.log(data);

                     $("#Tab tbody").append(data);

            }).fail(function()
            {
                    alert("Something Bad Happened table cannot be reloaded");
            });

}; 
<body>
<input type="button" value="Add" onclick="doAjaxPost()"/>
<table id="Tab" border="1" cellpadding="0" cellspacing="0" width="85%">
         <thead>
            <col width="100">
            <col width="70">
            <col width="70">
            <col width="100">
            <tr bgcolor="#F0F8FF">
                <th>City</th>
                <th>Status</th>
                <th>Action</th>
                <th>CityAdmin</th>
            </tr>
         </thead>
        <tbody>
        </table>     
</body>

//这是由firebug扩展验证的Json响应数据：

@RequestMapping("/AddCity")  
public @ResponseBody List<CityModel> AddCity(@RequestParam(value = "City")    String City1) throws Exception
{ 
      return cityAdapter.insertCity(City1);
}

/ *数据即将到来，但我的页面并不令人耳目一新。请有人帮助我。 * /

Answer 1

您必须从您提供的Json生成标记

说这是你的Json回应

{ "city":"add", "Status":"Status", "Action" :"Action", "CityAdmin": "CityAdmin" }

将您的ajax回调函数更新为

.done(function( data, type, xml)
{
    console.log(data);
    var Markup = "<tr><td>"+ data.city +"</td><td>"+data.Status+"</td><td>"+ data.Action + "</td><td>"+data.CityAdmin+"</td></tr>";
    $("#Tab tbody").append(Markup);
})

修改：添加了FIDDLE，

由于json提供的无效，我已经从对象数组创建了一个样本生成表。

$(function() {
   var json = [];
   var item = {
     'city': 'city1',
     "Status": "Status",
     "Action": "Action1",
     "CityAdmin": "CityAdmin1"
   };
   json.push(item);

   $.each(json, function(i, data) {
   console.log(i,data);
     $("#Tab").append("<tr><td>" + data.city + "</td><td>" + data.Status + "</td><td>" + data.Action + "</td><td>" + data.CityAdmin + "</td></tr>");
   });
 });

希望这适合你

Answer 2

//以这种方式，数据开始附加在表中。

 for(var i=0;i< data.length;i++)
 {      
      var obj = data[i];
      var vcity = obj["city"];
      var vstatus = obj["status"];
      var vaction = obj["action"];
      var vcityadmin = obj["cityAdmin"];
      var update = "<tr><td>"+ vcity +"</td><td>"+vstatus+"</td><td>"+ vaction + "</td><td>"+vcityadmin+"</td></tr>";

      $("#Tab tbody").append(update);
 }

异步ajax调用表附加数据的行

2 个答案: