ajax的get方法获取数据,对数据对象赋值

ajax方法获取数据

用vue写一个方法将后台数据渲染到table表格(iview表单)
首先,在div中插入table组件:

		<Table border
		       height=226
		       :columns="columns1"
		       :data="data"
		       :showPage="false">
		</Table>

然后,在data中把columns 和 data的参数传进去

data() {
            return {
                columns1: [
                    {key: 'feaName', title: '影响因素', align: 'center', width: 170},
                    {key: 'maxVal', title: '最高', align: 'right'},
                    {key: 'minVal', title: '最低', align: 'right'},
                    {key: 'feaType', title: '因素类型', width: 120, align: 'center'}
                ],
                data: []
            }
}

在methods中调用ajax函数

getCarAnalysis: function() {
				//请求的params参数
                let params = {
                    'corpId': '40288a225d6a5d8c015d6a68be1e0000',
                    'dateType': '0',
                    'beginTime': '2018-04',
                    'endTime': '2018-05',
                    'carNo': '闽DD0910'
                };
                util.ajax.post('/bi/api/energyAnalysis/getCarAnalysis', params).then((data) => {
                    //根据需要进行调试打印
                    console.log(data);
                    //obj获取的是data数组中的values的值
                    var obj = data[0].values;
                    this.data = obj;
                    console.log(this.data);//根据需要进行调试打印
                });
 },

生命周期钩子,通过获取mounted()里的getCarAnalysis,来拿到数据

	mounted() {
            this.getCarAnalysis();
        },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Ajax 获取的数据可以使用 JavaScript 进行操作,然后写入页面中。具体来说,可以使用以下步骤: 1. 定义一个 JavaScript 函数,用于执行 Ajax 请求,并处理响应数据。 2. 在该函数中,使用 XMLHttpRequest 对象发起请求,并监听该对象的 readystatechange 事件,以确定请求的状态。 3. 当 readystate 为 4 且请求成功时,通过 responseText 属性获取服务器响应的文本数据。 4. 对于该数据,您可以使用 JavaScript 进行任何操作,例如将其转换为 JSON 对象,并通过使用 DOM 操作,将其写入页面中的任何元素。 这是一个简单的示例: ``` function updatePage() { var xhr = new XMLHttpRequest(); xhr.open("GET", "data.json", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); document.getElementById("result").innerHTML = data.message; } }; xhr.send(); } ``` 在此示例中,我们向 data.json 发出请求,并在响应中读取 message 字段的值。最后,我们将该值写入页面中的 "result" 元素。 ### 回答2: 使用AJAX获取到的数据可以通过以下几种方式写入页面中: 1. innerHTML属性:可以将获取到的数据直接赋值给页面元素的innerHTML属性,例如: ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "data.txt", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("myElement").innerHTML = xhr.responseText; } }; xhr.send(); ``` 上述代码中,通过AJAX获取到的数据会被赋值给id为"myElement"的页面元素的innerHTML属性。 2. DOM操作:可以通过DOM操作将获取到的数据插入到页面中的特定位置,例如: ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "data.txt", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); var newElement = document.createElement("p"); newElement.innerHTML = data.name; document.getElementById("myContainer").appendChild(newElement); } }; xhr.send(); ``` 上述代码中,先通过AJAX获取到的数据解析为JSON对象后,创建一个新的p标签,将获取到的数据赋值给新创建的元素的innerHTML属性,最后将新元素插入到id为"myContainer"的页面容器中。 3. 模板引擎:可以使用模板引擎(如Mustache、Handlebars等)将获取到的数据与HTML模板进行结合生成最终的页面内容,例如: ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "data.txt", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var template = document.getElementById("template").innerHTML; var data = JSON.parse(xhr.responseText); var rendered = Mustache.render(template, data); document.getElementById("myContainer").innerHTML = rendered; } }; xhr.send(); ``` 上述代码中,首先获取到id为"template"的HTML模板,然后将获取到的数据解析为JSON对象,通过Mustache.render()方法数据与模板结合生成最终的结果,最后将结果赋值给id为"myContainer"的页面容器。 ### 回答3: 使用Ajax获取的数据可以通过多种方式写入页面中。以下是几种常见的方法: 一、使用innerHTML属性:通过该属性可以直接将数据作为HTML代码写入到指定的页面元素中。例如,假设我们有一个id为"content"的div元素,可以使用以下代码将获取的数据写入到该div中: ```javascript document.getElementById("content").innerHTML = ajaxData; ``` 二、使用innerText或textContent属性:如果获取的数据不需要解析为HTML代码,可以使用innerText或textContent属性将数据写入到指定的页面元素中。例如: ```javascript document.getElementById("content").innerText = ajaxData; // 或者 document.getElementById("content").textContent = ajaxData; ``` 三、创建新的HTML元素:可以通过JavaScript动态创建新的HTML元素,并将获取的数据添加到这些新元素中,然后将这些元素插入到页面中的适当位置。例如,假设我们想要将获取的数据写入到一个新的p标签中,并将其添加到id为"content"的div元素中,可以使用以下代码: ```javascript var p = document.createElement("p"); p.innerHTML = ajaxData; document.getElementById("content").appendChild(p); ``` 四、使用jQuery的方法:如果项目中引入了jQuery库,也可以使用其提供的方法来操作DOM。例如,使用jQuery的html()方法将获取的数据写入到指定的页面元素中: ```javascript $("#content").html(ajaxData); ``` 无论采用哪种方法,都可以根据具体需求和项目的开发环境选择最适合的方式将获取的数据写入到页面中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值