Ajax系列(二)

创建 XMLHttpRequest

<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}

if (!request)
alert("Error initializing XMLHttpRequest!");

function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/lookupCustomer.jsp?phone=" + escape(phone);
request.onreadystatechange = updatePage;
request.open("GET", url, true);

request.send(null);
}
/**回调方法,每次状态码改变都会被调用*/
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML =
response[1].replace(/\n/g, "");
} else
alert("status is " + request.status);
}
}
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 Ajax 加载数据并且拥有多个 Y 轴的 Echarts 示例: HTML 代码: ```html <div id="chart" style="width: 100%; height: 500px;"></div> ``` JavaScript 代码: ```javascript // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { title: { text: '多 Y 轴示例' }, tooltip: { trigger: 'axis' }, legend: { data:['蒸发量','降水量','平均温度'] }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, xAxis: [ { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis: [ { type: 'value', name: '蒸发量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '降水量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '平均温度', min: 0, max: 25, interval: 5, axisLabel: { formatter: '{value} °C' } } ], series: [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', yAxisIndex: 1, data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }, { name:'平均温度', type:'line', yAxisIndex: 2, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 19.5, 11.2, 6.5, 4.3] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 使用 jQuery 的 ajax 加载数据 $.get('data.php').done(function (data) { // 将 json 字符串转换成对象 data = JSON.parse(data); // 更新图表的数据 myChart.setOption({ series: [ { name:'蒸发量', type:'bar', data:data.evaporation }, { name:'降水量', type:'bar', yAxisIndex: 1, data:data.precipitation }, { name:'平均温度', type:'line', yAxisIndex: 2, data:data.temperature } ] }); }); ``` 以上代码中,我们指定了一个多 Y 轴的 Echarts 图表,并使用 jQuery 的 Ajax 加载了一个外部数据文件 `data.php` 中的数据。在数据加载完成后,我们使用 `setOption` 方法更新了图表的数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值