ajax实战篇---天气或者其他股票连续变动----json交互

举报
孙中明 发表于 2022/01/22 23:42:54 2022/01/22
【摘要】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>天气预报</title> <meta http-equiv="pragma" con...

 

   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>天气预报</title>
  5. <meta http-equiv="pragma" content="no-cache">
  6. <meta http-equiv="cache-control" content="no-cache">
  7. <meta http-equiv="expires" content="0">
  8. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  9. <meta http-equiv="description" content="This is my page">
  10. <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  11. <!--
  12. <link rel="stylesheet" type="text/css" href="styles.css">
  13. -->
  14. <script type="text/javascript">
  15. <!--
  16. //abc()表示要调用函数,5000表示每隔3秒去调用abc();
  17. //第一步-------------------------------------------------------创建ajax引擎
  18. function getXmlHttpObject(){
  19. var xmlHttpRequest;
  20. //不同的浏览器获取对象xmlhttprequest 对象方法不一样
  21. if(window.ActiveXObject){
  22. xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");//这个是ie内核
  23. }else{
  24. xmlHttpRequest=new XMLHttpRequest();//非ie内核
  25. }
  26. return xmlHttpRequest;//将创建创建的ajax引擎实例化
  27. }
  28. var myXmlHttpRequest="";//设置全局变量 为了后面的chuli 函数需要取得属性
  29. //第二步----------------------------------------------------------------------获取数据并发送服务器
  30. function sendRequest(){
  31. myXmlHttpRequest=getXmlHttpObject();//从实例化的模型里面的方法函数
  32. if(myXmlHttpRequest){
  33. var url="doweather.php";//url 属性 选择提交的地址
  34. var data="city[]=bj&city[]=sh&city[]=cd"//数据 id为sheng的数据取得数据
  35. myXmlHttpRequest.open("post",url,true);//这里选择提交的方式post 异步操作
  36. myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//打开请求.
  37. //指定为了第四步处理做准备回调函数.chuli是函数名
  38. myXmlHttpRequest.onreadystatechange=function chuli(){

   
  1. //这里第四步 解决问题
  2. if(myXmlHttpRequest.readyState==4){
  3. if(myXmlHttpRequest.status==200){
  4. var res_obj=eval("("+myXmlHttpRequest.responseText+")");
  5. $('bj').innerText=res_obj[0].price;
  6. $('sh').innerText=res_obj[1].price;
  7. $('cd').innerText=res_obj[2].price;
  8. }
  9. }
  10. }
  11. myXmlHttpRequest.send(data);
  12. }
  13. }
  14. function $(id){
  15. return document.getElementById(id);
  16. }
  17. window.setInterval("sendRequest()",1000);
  18. -->
  19. </script>
  20. </head>
  21. <body>
  22. <center>
  23. <h1>每隔5秒中更新数据</h1>
  24. <table border="1">
  25. <tr><td>城市</td><td>温度</td></tr>
  26. <tr><td >北京</td><td id="bj">21℃</td></tr>
  27. <tr><td >上海</td><td id="sh">20℃</td></tr>
  28. <tr><td >成都</td><td id="cd">11℃</td></tr>
  29. </table>
  30. </center>
  31. </body>
  32. </html>




  

    
  1. <?php
  2. header("Content-Type: text/html;charset=utf-8");
  3. //告诉浏览器不要缓存数据
  4. header("Cache-Control: no-cache");
  5. //获取城市的名字
  6. $cities=$_POST['city'];
  7. $res='[';
  8. for($i=0;$i<count($cities);$i++){
  9. if($i==count($cities)-1){
  10. $res.='{"cityname":"'.$cities[$i].'","price":"'.rand(0,40).'℃"}]';
  11. }else{
  12. $res.='{"cityname":"'.$cities[$i].'","price":"'.rand(0,40).'℃"},';
  13. }
  14. }
  15. echo $res;
  16. ?>



 




文章来源: hiszm.blog.csdn.net,作者:孙中明,版权归原作者所有,如需转载,请联系作者。

原文链接:hiszm.blog.csdn.net/article/details/72811095

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200