分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

JS中将ajax请求返回json数据动态生成表格显示在div中

发布时间:2023-09-06 01:17责任编辑:熊小新关键词:jsdivjson

1、页面内容

<div style="width:900px;height:400px;" id="tableInfo"></div>

2、js内容

 $.ajax({    //使用JQuery内置的Ajax方法
         type : "post",        //post请求方式
         async : true,        //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
         url : "countVersion.action",    //请求发送到ShowInfoIndexServlet处
         data : productversions,        //请求内包含一个key为name,value为损坏数的参数;服务器接收到客户端请求时通过request.getParameter方法获取该参数值
         dataType : "json",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容,result即为服务器返回的json对象
             if (result != null && result.length > 0) {

    //动态生成表格
                var tableInfos = document.getElementById(‘tableInfo‘);
                 var code = ‘<TABLE style="width:900px;height:350px;" border="1">‘;
                 code += ‘<TR><TH>产品</TH><TH>数量</TH></TR>‘;
                 for(var i=0;i<result.length;i++){       
                 
                        code += ‘<TR><TD>‘+result[i].version+‘</TD><TD>‘+result[i].count+‘</TD></TR>‘;
                    }
                 tableInfos.innerHTML = code + ‘</TABLE>‘;
             }else {
        
                 alert("无数据!");
             
             }

JS中将ajax请求返回json数据动态生成表格显示在div中

原文地址:http://www.cnblogs.com/shoose/p/7660639.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved