使用 AJAX 使用 JSON 填充选项卡

Question

我想修改这个 ajax 请求，使其使用接收的 JSON 填充选项卡（动态）。现在，ajax 代码只打印由 Servlet 接收的对象 json。这是jquery中的代码：

 <script type="text/javascript">

 var form = $('#form1');

 form.submit(function () {
//event.preventDefault();
  $.ajax({
  type: form.attr('method'),
  url: form.attr('action'),
  data: form.serialize(),
 success: function (data) {
 var result=data;

  $('#result').html(result);
  // Result is a ID of a <div><div> in which I  
   //  print the json string. I want build a  
   // table here. But I want that this table is dinamic,   
   // that is also the NAME of columns must depends from json                                                             
  console.log(result);
     }
  });
  return false;
});  </script>

相反，这是我的 servlet

  protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        HttpSession session = request.getSession();

        String k = request.getParameter("choose"); 

        //From a dropdown select, for example I choose to print
        // the table "products"
         if(k.equals("products")){  
        ArrayList<Products> list = new ArrayList<Products>();
         list =  bDBean.listProducs();

         Iterator<Products> i = list.iterator();
                while(i.hasNext()){
                Products temp = i.next();
                Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
                String json = gson.toJson(temp);
               // response.setContentType("application/json");
                response.setContentType("text/html");
                response.setCharacterEncoding("UTF-8");
                response.getWriter().write(json);
                }
            }
          }

Answer 1

首先将您的 javascript 代码包装在文档就绪语句中

    <script type="text/javascript">

      $(function() {
        var form = $('#form1');

        form.submit(function() {
          //event.preventDefault();
          $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success: function(data) {
              var table = '<table><thead><tr><td>productNo</td><td>name</td><td>price</td></tr></thead><tbody>'
              $.each(JSON.parse("["+data.split('}{').join('},{')+"]"), function(i, v) {
                table += '<tr><td>' + v.productNo + '</td><td>' + v.name +' < /td><td>'+v.price+'</td > < /tr>';
              });
              table += '</tbody></table>'
              $('#result').html(table);
            }
          });
          return false;
        });
      });

    </script>

使用下面的成功函数来显示你的表格

success: function (data) {
var table = '<table><thead><tr><td>productNo</td><td>name</td><td>price</td></tr></thead><tbody>'
$.each(JSON.parse("["+data.split('}{').join('},{')+"]"),function(i,v){
      table+= '<tr><td>'+v.productNo+'</td><td>'+v.name+'</td><td>'+v.price+'</td></tr>';
});
table+='</tbody></table>'
$('#result').html(table);
}

Answer 2

未捕获的 TypeError 可能是因为您没有解析 json 赞$.each(JSON.parse(myData), ...);