php ajax实现无刷新获取天气状态

 更新时间:2016年11月25日 17:26  点击:1705
首先我们要明白一点我们自己是无法来做天气预报这种功能的,这里我们只要调用api接口返回的数据就可以了,下面是以中国天气网的api接口调用实例我们一起来学习。 天气已经成为生活中不可缺少的话题,与我们的生活有着密切的关系,我博客右边就用php+ajax做了一个天气查询小模块。

理想的状态应该是用户根据不同的访问地自动获取当地的天气信息,但是暂时技术有限吧,只能完成手动查询的了。这个就简单多了,没用到过多的技术,主要是应用ajax调用一个开放接口,然后再处理一下返回的json数据就完成了。

接口地址:http://www.weather.com.cn/data/cityinfo/101200101.html

返回的值:{"weatherinfo":{"city":"武汉","cityid":"101200101","temp1":"28℃","temp2":"36℃","weather":"晴转多云","img1":"n0.gif","img2":"d1.gif","ptime":"18:00"}}


接口地址部分“101200101”,这串ID号是城市ID,我百度到城市对应的id,然后封装成了一个数组,用的时候直接调用就行了。核心代码也不多,主要是城市——ID比较大,我就不贴源码了,直接打包分享出来吧。需要的朋友直接下载就行了!

部份代码

 代码如下 复制代码


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(function(){
 
 $("#submit").click(function(){
  //发送ajax请求
  var city = $("#city").val();
  $.post("getweather.php", {city:city}, function(data){
   if(data.weatherinfo.city){
    var city = data.weatherinfo.city;   //城市名称
    var temp1 = data.weatherinfo.temp1;  //最高气温
    var temp2 = data.weatherinfo.temp2;  //最低气温
    var weather = data.weatherinfo.weather;  //天气描述(“晴到多云”)
    alert(city+":"+weather+","+temp2+"-"+temp1); 
    return;
   }else{
    alert("没找到该城市");
   }
  },"json");
 });
 
});
</script>

getweather.php文件

 代码如下 复制代码

<form method="post">
 请输入城市:<input type="text" name="city" id="city" value="武汉" />
 <input type="button" name="sub" id="submit" value="查看天气" />
</form>


为、<?php

 include "citycode.php";
 $city = $_POST['city'];
 $citycode = @$citycode[$city];
 //echo "shibushi";
 if(empty($citycode)){
  echo "您输入的城市不在范围内";
 }else{
  echo file_get_contents("http://www.weather.com.cn/data/cityinfo/".$citycode.".html");
 }
?>

测试效果

源码下载:php ajax实现无刷新获取天气状态源码下载:

 

在php中字符串中指定位置的字符替换为星号我们有很我函数可以实现如有substr,preg_replace,substr_replace等下面我分别给这三个函数分别介绍一个实例,主要讲到电话,身份证.

手机号码字符串替换为星号代码:

 代码如下 复制代码

<?php
$str = "15832818835";
echo substr($str,0,3).'*****'.substr($str,8,strlen($str));//保留前三位和后三位
?>

或用正则

<?php
$s='www.111cn.net的王经理:13999312365 李经理:13588958741';
$s=preg_replace('#(d{3})d{5}(d{3})#', '${1}*****${2}', $s);
echo $s;
//王经理:139*****365 李经理:135*****741
?>


替换字符串中间位置字符为星号

 代码如下 复制代码

function half_replace($str){ 
   $len = strlen($str)/2; 
    return substr_replace($str,str_repeat('*',$len),ceil(($len)/2),$len); 

 
echo half_replace('test'),"n",half_replace('tests'),"n",half_replace('exceptions');

PHP身份证号打星号

 代码如下 复制代码

echo strlen($idcard)==15?substr_replace($idcard,"****",8,4):(strlen($idcard)==18?substr_replace($idcard,"****",10,4):"111cn.net提示身份证位数不正常!");

攒,顶,踩功能主要用于评论中这里我们来做一个简单基于jquery ajax与php的mysql实现的攒,顶,踩功能,文章最后附了源码下载。

php应用越来越多,也越来越广泛,为了增加网站的丰富多彩,从而出现了很多新的技术。ajax是现代网站中不能缺少的一项技术,他可以异步刷新数据,而实现很多效果,比如刷新验证码,微博中的攒功能,都是运用这个。

本次攒功能的效果图:

主页文件(index.php):

 代码如下 复制代码

<script type="text/javascript" src="/Public/js/jquery.min.js"></script>

<script type="text/javascript" src="finger_ajax.js"></script>

<?php

 header("Content-type:text/html;charset=utf-8");

 include "finger_ajax.php";

 


 $sql = "select * from finger_ajax";

 $res = mysql_query($sql,$link);

 while($row = mysql_fetch_array($res)){

  echo "<p>".$row['title']." <a href='#' onclick='finger(".$row['id'].")'><img src='finger.jpg'/>攒一下(<span class='finger".$row['id']."'>".$row['finger']."</span>)</a></p> ";

 }

?>


处理ajax请求及配置信息文件(finger_ajax.php):

 

 代码如下 复制代码

<?php

 /**"攒" 功能 响应ajax请求*/

 //配置

 $dbHost = "localhost";

 $dbUser = "root";

 $dbPass = "dddddd";

 $dbName = "test";

 $dbCharset = "utf8";

 


 $link = mysql_connect($dbHost,$dbUser,$dbPass) or die(mysql_error());

 mysql_query("set names ".$dbCharset);

 mysql_select_db($dbName);

 // End

 


 //接受对应的id

 if(!empty($_POST['id'])){

  $id = $_POST['id'];

  //“攒”加1

  $sql = "update finger_ajax set finger=finger+1 where id=$id;";

  if(mysql_query($sql,$link)){

   echo "ok";

  }else{

   echo "failed";

  }

 }

?>


js文件(finger_ajax.js):

 

//攒 js

 代码如下 复制代码

function finger(topic_id){

 $.post("finger_ajax.php", { "id": topic_id },

   function(data){

     if(data=="ok"){

   alert("感谢您的支持!");

  }else{

   alert("对不起,失败了!");

  }

   }, "text"); 

 //获取当前“攒”的次数并加1

 var finger = parseInt($(".finger"+topic_id).html())+1;

 //更新“攒”的次数

 $(".finger"+topic_id).html(finger);

}


数据库代码(finger_ajax.sql):

 代码如下 复制代码


DROP TABLE IF EXISTS `finger_ajax`;

CREATE TABLE `finger_ajax` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `title` varchar(50) NOT NULL DEFAULT '',

  `finger` int(11) NOT NULL DEFAULT '0',

  PRIMARY KEY (`id`)

) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

 


-- ----------------------------

-- Records of finger_ajax

-- ----------------------------

INSERT INTO `finger_ajax` VALUES ('1', '今天天气还不错哦!去做点什么好呢?', '10');

INSERT INTO `finger_ajax` VALUES ('2', '欢迎来到 www.111cn.net,国庆将至,祝大家国庆节快乐!!', '3');


原文地址: php ajax实现攒,顶,踩的功能 http://file.111cn.net/upload/2013/12/a63.zip

 

如果你的网页出现301或404对于用户体验来讲是一个非常严重的问题了,所以我们在做php header301或404时就必须小心再小心了,正同我来看看。

301跳转

 代码如下 复制代码

header('HTTP/1.1 301 Moved Permanently');  
header('Location: http://www.abc.com/aaa/');  
exit();

不要漏了header(‘HTTP/1.1 301 Moved Permanently’); 不然返回不了301

404错误页面

 代码如下 复制代码

header("HTTP/1.1 404 Not Found");

如果上面的不起作用,可以试试下面的:

 代码如下 复制代码

header("Status: 404 Not Found");

所以为了万无一失,可以两句都写上:

 代码如下 复制代码

header("HTTP/1.1 404 Not Found");
header("Status: 404 Not Found");

小提示,

如果写好代码之后我们必须使用站长工具来测试一下返回的状态是不是我们想要的哦。

在php获取一个url地址我会使用到超级全局变量$_SERVER,他包括了各种参数获取,如HTTP_HOST、PHP_SELF、QUERY_STRING等等,这里就不介绍了。

PHP获取URL的几个函数介绍

 代码如下 复制代码

<?php
//获取域名或主机地址
echo $_SERVER['HTTP_HOST']."<br>";
//获取网页地址
echo $_SERVER['PHP_SELF']."<br>";
//获取网址参数
echo $_SERVER["QUERY_STRING"]."<br>";
//来源网页的详细地址
echo $_SERVER['HTTP_REFERER']."<br>";
?>

把上面的几个函数组合一下,即可得到完整的URL地址

 代码如下 复制代码

<?php
// 说明:获取完整URL

function curPageURL()
{
    $pageURL = 'http';

    if ($_SERVER["HTTPS"] == "on")
    {
        $pageURL .= "s";
    }
    $pageURL .= "://";

    if ($_SERVER["SERVER_PORT"] != "80")
    {
        $pageURL .= $_SERVER["SERVER_NAME"] . ":" . $_SERVER["SERVER_PORT"] . $_SERVER["REQUEST_URI"];
    }
    else
    {
        $pageURL .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
    }
    return $pageURL;
}
?>

定义该函数之后就可以直接调用了:

 代码如下 复制代码

<?php
  echo curPageURL();
?>

[!--infotagslink--]

相关文章

  • php无刷新利用iframe实现页面无刷新上传文件(1/2)

    利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数,该参数为从客户端获取的$_files变量,返回重新命名后的文件名,如果上传失...2016-11-25
  • jQuery+PHP发布的内容进行无刷新分页(Fckeditor)

    这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。...2015-10-23
  • 解决vue刷新页面以后丢失store的数据问题

    这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
  • java后台实现js关闭本页面,父页面指定跳转或刷新操作

    这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
  • 解决vuex数据页面刷新后初始化操作

    这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
  • php+ajax制作无刷新留言板

    本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图:数据库连接代码如下: <&#63;php$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");mysql_select_db("d...2015-10-30
  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
  • vue实现在进行增删改操作后刷新页面

    这篇文章主要介绍了vue实现在进行增删改操作后刷新页面,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
  • Vue 中获取当前时间并实时刷新的实现代码

    这篇文章主要介绍了Vue 中获取当前时间并实时刷新,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-13
  • C#实现刷新桌面的方法

    这篇文章主要介绍了C#实现刷新桌面的方法,涉及C#基于shell32.dll动态链接库实现系统桌面刷新的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • 纯javascript实现简单下拉刷新功能

    代码很简单,实现的功能却很实用,直接奉上代码CSS:复制代码 代码如下: <meta charset="utf-8" /> <title>Pull to Refresh</title> <meta name="viewport" content="width=device-width,height=device-height,inital-scal...2015-03-15
  • Springboot使用thymeleaf动态模板实现刷新

    这篇文章主要介绍了Springboot使用thymeleaf动态模板实现刷新,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-31
  • Ionic如何实现下拉刷新与上拉加载功能

    在日常项目开发中我们经常见到下拉刷新上拉加载的功能,接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下...2016-06-12
  • vue相同路由跳转强制刷新该路由组件操作

    这篇文章主要介绍了vue相同路由跳转强制刷新该路由组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
  • ajax+php 无刷新数据调用经典实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1...2016-11-25
  • jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击

    这篇文章主要介绍了jQuery禁用键盘后退、屏蔽F5刷新、禁用右键单击功能等快捷方法,感兴趣的小伙伴们可以参考一下...2016-01-24
  • C#利用子线程刷新主线程分享教程

    本文将详细介绍C#利用子线程如何刷新主线程,需要了解更多的朋友可以参考下...2020-06-25
  • php iframe 无刷新文件上传代码

    其它原理很简单,利用form表单的target属性和iframe来实现的,打开为iframe试就行了,返回就利用js判断php教程运行后返回的参数是不是成功 一、上传文件的一个php方法。...2016-11-25
  • python输出结果刷新及进度条的实现操作

    这篇文章主要介绍了python输出结果刷新及进度条的实现操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-13
  • iframe无刷新文件上传实现程序

    iframe无刷新文件上传其实就是在当前页面打开了上传程序的页面,有点像ajax局部刷新一个,只是我们把它放到了iframe页面中上传,同时我们把iframe页面给隐藏了。 一个...2016-11-25