Ajax 之（二）JSON、无刷新表单信息提交、ajax聊天室、天气预报设置

xiaoxiao2022-06-29 34

JSON

什么是json

json: javascript object notation（js对象符号）其是一种数据交换格式，xml也是数据交换格式，json对比xml的生成和处理要更加方便。因此在许多领域，json正逐步取代xml的使用。

天气预报接口数据需要通过一定的格式组织并提供出来，该数据格式最好还是各个语言都可以识别的，因此xml或json就被应用上了。

json的使用

javascript里边json体现

json在javascript里边就是字面量对象 var obj = {名称:值，名称:值，名称:function(){}}

通过php生成json信息

json_encode(数组/对象)------------>生成json信息 <?php //PHP中生成json信息 //json_encode(数组/对象) $color = array('red','green','blue');//索引数组 echo json_encode($color), '<br/>';//["red","green","blue"] $animal = array('east'=>'tiger','north'=>'wolf','south'=>'monkey');//关联数组 echo json_encode($animal),'<br/>';//{"east":"tiger","north":"wolf","south":"monkey"} //索引关联数组 $animal2 = array('east'=>'tiger','north'=>'wolf','duck','south'=>'monkey'); echo json_encode($animal2),'<br/>';//{"east":"tiger","north":"wolf","0":"duck","south":"monkey"} //【对象生成json信息】 class Person{ public $addr = 'beijing'; public $height = 170; public function study(){ echo '好好学习'; } } $tom = new Person(); echo json_encode($tom);//{"addr":"beijing","height":170}

php处理json信息

json_decode(json信息); 反编码json信息对json字符串信息进行反编码，变为当前语言可以识别的信息。 <?php //反编码json信息 //json_decode(json字符串,true-arr/false-obj) $animal = array('east'=>'tiger','north'=>'wolf','south'=>'mokdey');//关联数组 $j_animal = json_encode($animal); $aml = json_decode($j_animal,true); var_dump($aml);//array(3) { ["east"]=> string(5) "tiger" ["north"]=> string(4) "wolf" ["south"]=> string(6) "mokdey" } echo '<br/>'; //$j_str = "{'first':'hanmeimei','second':'lilie','three':'baoqiang'}";//NULL 反编码失败，双引号的原因 $j_str = '{"first":"hanmeimei","second":"lilie","three":"baoqiang"}'; var_dump(json_decode($j_str,false));//object(stdClass)#1 (3) { ["first"]=> string(9) "hanmeimei" ["second"]=> string(5) "lilie" ["three"]=> string(8) "baoqiang" }

javascript接收处理json信息

通过eval()把接收的json字符串变成真实的对象信息

03.php

<?php //提供接口的天气信息 $weather = array('addr'=>'北京','temp'=>'9-22','wind'=>'north4-5'); echo json_encode($weather); <html> <head> <meta charset='utf-8' /> <script type='text/javascript'> function show(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ //通过eval()把接收的json字符串变成真实的对象信息 eval('var info=' + xhr.responseText); var str = '地址：' + info.addr + ' 温度：' + info.temp + ' 风向：' + info.wind; document.getElementsByTagName('div')[0].innerHTML = str; } } xhr.open('get','./03.php'); xhr.send(null); } window.onload = function(){ show(); } </script> </head> <body> <div></div> </body> </html>

json改造ajax无刷新分页

ajax的每次请求都要从服务器获得三部分信息，对带宽、服务器资源、用户等待时间等资源都要占据三份，我们要做优化：把不发生变化的css样式、html标签放到客户端手动生成，把服务器端的工作给减轻。那么我们的数据就可以通过json格式传递回来(之前是html标签格式)

json使用的好处： ajax的使用是对带宽、用户等待时间、服务器资源有节省 json的使用是在ajax的基础上对带宽、用户等待时间、服务器资源的进一步去节省。

无刷新表单信息提交

收集表单信息

利用新技术FormData表单数据对象可以实现快速收集表单信息。 FormData是html5的新技术，在主流浏览器都可以正常使用。

04.php

<?php //接收客户单传递过来的form表单信息 print_r($_POST); <html> <head> <title>ajax+dom 实现无刷新提交</title> <meta charset='utf-8' /> <script type='text/javascript'> window.onload = function(){ var fm = document.getElementsByTagName('form')[0]; fm.onsubmit = function(){ //dom收集表单信息 var nm = document.getElementById('username').value; var pwd = document.getElementById('password').value; var email = document.getElementById('email').value; var info = 'name='+nm+'&pass='+pwd+'&email='+email; //ajax 传递表单信息 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ alert(xhr.responseText); } } xhr.open('post','./04.php'); xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send(info); return false;//阻止浏览器提交跳转 } } </script> </head> <body> <form method='post' action=''> <input type='text' id='username' name='username' /><br/> <input type='text' id='password' name='password' /><br/> <input type='text' id='email' name='email' /><br/> <input type='submit' value='提交'> </form> </body> </html>

利用FormData快速收集(ie测试有问题，有时间再继续)

ajax实现附件上传

<form enctype=”multipart/form-data”> <input type=”file”> 服务器端：$_FILES接收附件信息(name/error/size/type/tmp_name) move_uploaded_file(临时附件，真实附件路径名);

收集附件信息： dom方式只可以收集普通的表单域信息，并且浏览器由于安全方面的限制也禁止通过javascript语言操作本地文件。可以利用FormData实现附件信息的收集，普通表单域和上传文件域均可以收集。

05.php

<?php //echo "post:"; //print_r($_POST); //echo "file:"; //print_r($_FILES); //$_FILES['user_pic']['error'] //0->ok 1->大小超过php.ini限制 2->大小超过MAX_FILE_SIZE限制 //3->附件只上传了一部分(不完整) 4->没有上传附件 if($_FILES['user_pic']['error']>0){ exit('上传附件有问题，有可能没有附件'); } //服务器保存附件名字为本身名字 //本地文件------>上传(php程序处理)------>服务器 //本地文件名字的字符集 gb2312 //php程序的字符集 utf-8--->gb2312 // (在程序里边把utf-8编码的附件名字转码为 gb2312) //服务器的字符集 gb2312 $name = $_FILES['user_pic']['name']; $name = iconv('UTF-8','GB2312',$name); //$name的编码由utf-8---变为--->gb2312 $path = "./upload/"; //附件上传逻辑 //move_uploaded_file(临时路径名，真实路径名); if(move_uploaded_file($_FILES['user_pic']['tmp_name'],$path.$name)) echo "success"; else echo "fail"; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript"> window.onload = function(){ var fm = document.getElementsByTagName('form')[0]; fm.onsubmit = function(){ //利用FormData实现form表单信息收集 var fd = new FormData(fm); //fd 内部会把普通表单域和上传文件域的信息都收集 //ajax传递表单信息 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ alert(xhr.responseText); } } //设置监听事件ajax.upload.onprogress xhr.upload.onprogress = function(evt){ //感知附件上传情况,利用事件对象感知 var loaded = evt.loaded; var total = evt.total; var per = Math.floor((loaded/total)*100)+"%"; document.getElementById('son').innerHTML = per; document.getElementById('son').style.width = per; } xhr.open('post','./05.php'); xhr.send(fd); return false;//组织浏览器提交 } } </script> <style type="text/css"> #pat {width:430px;height:40px; border:5px solid blue;} #son {width:0;height:100%; background-color:lightblue;} </style> </head> <body> <h2>ajax+FormData实现无刷新文件上传</h2> <form method="post" action="" > <p>用户名：<input type="text" name="username" /></p> <p>密码：<input type="password" name="password" /></p> <p>邮箱：<input type="text" name="email" /></p> <div id="pat"><div id="son"></div></div> <p>头像：<input type="file" name="user_pic" /></p> <p><input type="submit" value="注册" /></p> </form> </body> </html>

使用FormData注意：

① 每个表单域必须有name属性 ② 在form标签里边无需设置enctype=”multipart/form-data”属性(即时有上传域) ③ ajax传递FormData的数据不需要设置setRequestHeader()函数

上传大附件进度条设置

php.ini开放大附件上传限制：

和上面的代码写一个里了

ajax聊天室

分析

及时显示聊天内容

CREATE TABLE `message` ( `id` int(11) NOT NULL AUTO_INCREMENT, `msg` text, `sender` varchar(32) NOT NULL DEFAULT '', `receiver` varchar(32) NOT NULL DEFAULT '', `color` char(7) NOT NULL DEFAULT '', `biaoqing` varchar(32) NOT NULL DEFAULT '', `add_time` datetime NOT NULL DEFAULT '0000-00-00 00:00:00', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8

发表聊天信息

聊天室优化

设置滚动条，避免信息溢出显示聊天内容的时候，滚动条在最下边 divnode.scrollHeight; 获得div元素高度(包括滚动条) divnode.scrollTop; 设置滚动条卷起高度

聊天室源码

数据表在上边 data.php

<?php //连接数据库、获得最新的聊天内容 $link = mysql_connect('localhost','root','123456'); mysql_select_db('shop', $link); mysql_query('set names utf8'); $maxID = $_GET['maxID']; $sql = "select * from message where id>'$maxID'"; $qry = mysql_query($sql); $info = array(); while($rst = mysql_fetch_assoc($qry)){ $info[] = $rst; } //聊天信息通过json格式传给ajax echo json_encode($info);

send.php

<?php //连接数据库、获得最新的聊天内容 $link = mysql_connect('localhost','root','123456'); mysql_select_db('shop', $link); mysql_query('set names utf8'); //发表聊天内容 $msg = $_POST['msg']; $color = $_POST['color']; $biaoqing = $_POST['biaoqing']; $receiver = $_POST['receiver']; $sql = "insert into message values (null,'$msg','admin','$receiver','$color','$biaoqing',now())"; if(mysql_query($sql)){ echo "发表聊天成功"; }else{ echo "发表聊天失败"; }

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" style="text/css" href="./css/talk.css" /> <script type="text/javascript"> var maxID = 0;//声明已经获得的最大的信息id值变量 //获得聊天信息 function showmsg(){ //ajax去服务器端(php)获得聊天信息 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ eval("var info="+xhr.responseText); var s = ""; //info外维是数组，内部有字面量对象元素 for(var i=0; i<info.length; i++){ s += "<p style='color:"+info[i].color+"'>"; s += info[i].sender+" 对 "+info[i].receiver+" "+info[i].biaoqing; s += " 说:"+info[i].msg+"("+info[i].add_time+")"; s += "</p>"; //把已经获得信息的id值赋予给maxID maxID = info[i].id; } //把拼装好的消息追加给div显示 var divnode = document.getElementById('show_msg'); divnode.innerHTML += s; //设置滚动条卷起高度=========div本身高度 divnode.scrollTop = divnode.scrollHeight; } } xhr.open('get','./data.php?maxID='+maxID); xhr.send(null); } window.onload = function(){ showmsg(); setInterval("showmsg()",2000); } </script> <style type="text/css"> </style> </head> <body> <div id="main"> <div id="left"> <h2>在线名单：（5人）</h2> <ul id="user"> <li>帅哥：恶魔</li> <li>靓妹：甜甜</li> <li>帅哥：诸葛</li> <li>帅哥：成就梦想</li> <li>靓妹：郁金香</li> </ul> <ul id="anniu"> <li><input type="button" value="刷新名单" ></li> <li><input type="button" value="刷新屏幕" ></li> <li><input type="button" value="退出聊天" ></li> </ul> </div> <div id="right"> <div id="content"> <h2 id="content-title">有什么意见和建议欢迎大家踊跃提出</h2> <hr /> <div id="show_msg"> <p style="color:red">PHP爱好者聊天室公告：欢迎恶魔来到聊天室(22:05:35)</p> <p>恶魔对大家微笑说：对啊(22:05:35)</p> <p>恶魔对大家微笑说：对啊(22:05:35)</p> <p style="color:#800080">恶魔对大家微笑说：好久不见了啊(22:05:35)</p> <p style="color:red">PHP爱好者聊天室公告：欢迎天使来到聊天室(22:05:35)</p> <p>天使对大家微笑说：你来了啊(22:05:35)</p> </div> </div> <div id="send"> <div id="control"> <form> 颜色： <select name="color" id="color"> <option value="">请选择</option> <option style="color:#FF8888" value="#FF8888">爱的暗示</option> <option style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option> <option style="color:#0000FF" value="#0000FF">碧空蓝天</option> <option style="color:#9F88FF" value="#9F88FF">灰蓝种族</option> <option style="color:#000088" value="#000088 ">蔚蓝海洋</option> <option style="color:#77FFEE" value="#77FFEE">清清之蓝</option> <option style="color:#4400B3" value="#4400B3">发亮篮紫</option> <option style="color:#A500CC" value="#A500CC">紫的拘谨</option> <option style="color:#B088FF" value="#B088FF">卡其制服</option> <option style="color:#D1BBFF" value="#D1BBFF">伦敦灰雾</option> <option style="color:#DC143C" value="#DC143C">卡布其诺</option> <option style="color:#A52A2A" value="#A52A2A">苦涩心红</option> <option style="color:#FF0000" value="#FF0000">正宗喜红</option> <option style="color:#990099" value="#990099">红的发紫</option> <option style="color:#FF0000" value="#FF0000">红旗飘飘</option> <option style="color:#D2691E" value="#D2691E ">黄金岁月</option> <option style="color:#800080" value="#800080">紫金绣贴</option> <option style="color:#006400" value="#006400">橄榄树绿</option> <option style="color:#000000" value="#000000">绝对黑色</option> </select> 表情： <select name="biaoqing"> <option value="">请选择</option> <option value="笑着">笑着</option> <option value="高兴地">高兴地</option> <option value="含情脉脉">含情脉脉</option> <option value="微笑">微笑</option> <option value="幸福">幸福</option> <option value="有点脸红">有点脸红</option> <option value="使劲安慰">使劲安慰</option> <option value="自言自语">自言自语</option> <option value="差点要哭">差点要哭</option> <option value="嚎啕大哭">嚎啕大哭</option> <option value="一把鼻涕">一把鼻涕</option> <option value="很无辜">很无辜</option> <option value="流口水">流口水</option> <option value="神秘兮兮">神秘兮兮</option> <option value="幸灾乐祸">幸灾乐祸</option> <option value="很不服气">很不服气</option> <option value="不怀好意">不怀好意</option> <option value="拳打脚踢">拳打脚踢</option> <option value="不知所措">不知所措</option> <option value="翻箱倒柜">翻箱倒柜</option> <option value="很遗憾">很遗憾</option> <option value="很严肃">很严肃</option> <option value="善意警告">善意警告</option> <option value="正气凛然">正气凛然</option> <option value="哈欠连天">哈欠连天</option> <option value="小声的">小声的</option> <option value="大声的">大声的</option> <option value="尖叫一声">尖叫一声</option> <option value="遗憾的">遗憾的</option> <option value="无精打采">无精打采</option> <option value="想吐">想吐</option> <option value="真诚">真诚</option> <option value="不好意思">不好意思</option> <option value="扭捏的">扭捏的</option> <option value="腼腆的">腼腆的</option> <option value="很诧异">很诧异</option> <option value="依依不舍">依依不舍</option> </select> 聊天对象： <select name="receiver"> <option value="所有人">所有人</option> <option value="恶魔">帅哥：恶魔</option> <option value="甜甜">靓妹：甜甜</option> <option value="诸葛">帅哥：诸葛</option> <option value="成就梦想">帅哥：成就梦想</option> <option value="郁金香">靓妹：郁金香</option> </select> <br /> <textarea id="msg" name="msg"></textarea> <input type="button" value="发送" onclick="sendmsg()" /> <span id="sendresult"></span> </form> </div> </div> </div> </div> </body> </html> <script type="text/javascript"> //ajax+FormData实现聊天内容的发送 function sendmsg(){ var fm = document.getElementsByTagName('form')[0]; var fd = new FormData(fm); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ document.getElementById('sendresult').innerHTML = xhr.responseText; setTimeout('cleara()',2000); } } xhr.open('post','./send.php'); xhr.send(fd); } function cleara(){ document.getElementById('sendresult').innerHTML = ""; document.getElementById('color').value = ""; } </script>

天气预报设置

ajax由于浏览器的限制，禁止跨域请求

解决：利用php代理，跨域请求天气信息

天气信息获取注意事项：

不同地区需要显示该地区对应的天气信息获得访问用户的ip地址信息，通过ip地址获得其对应的城市信息城市信息获得出来还要获得城市的编码信息。 ip——->城市——->编码

www.tianqi.com网站已经把 ip/城市/编码的关系都给处理好了，可以直接调用获得城市对应的天气信息。

转载请注明原文地址: https://ju.6miu.com/read-1125232.html

专利

最新回复(0)

Ajax 之 （二）JSON、无刷新表单信息提交、ajax聊天室、天气预报设置