ajax小demo-----ajax中json的使用
使用简单例子,表单的的输入,将表单输入以JSON的形式传入,并后台返回JSON格式,使用js函数处理,进行显示,进一步熟悉了ajax的用法,以及JSON的的使用。例子如下:
html部分:<formaction="test1.php"method="get"onsubmit="returncheck();"><labelfor="username">用户名 </label><inputtype="text"placeholder="请输入用户名"id="username"><br><labelfor="usernum"> 学号 </label><inputtype="text"placeholder="请输入学号"id="usernum"onblur="checkform();"><br><inputtype="submit"value="提交"><divid="tips"></div></form>js部分:<script>varxmlobj;varresult=false;functioncreateXMLHttpRequest(){if(window.ActiveXObject){xmlobj=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){xmlobj=newXMLHttpRequest();}}functioncheck(){if(resultform()){returntrue;}else{returnfalse;}}functioncheckform(){varusernameobj=document.getElementById('username').value;varusernumobj=document.getElementById('usernum').value;vardata={username:usernameobj,usernum:usernumobj};varjsonobj=JSON.stringify(data);//将对象转换为JSON串,通过ajax进行传递varcb=ajaxResultdeal;url='test.php?data='+jsonobj+"&r="+Math.random();toAjax(url,cb);}functiontoAjax(url,callback){createXMLHttpRequest();xmlobj.onreadystatechange=function(){if(xmlobj.readyState==4&&xmlobj.status==200){callback(xmlobj.responseText);}else{result=false;}}xmlobj.open("GET",url,true);/*xmlobj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlobj.send(data);*/xmlobj.send(null);}functionajaxResultdeal(response){vartips=document.getElementById('tips');varjson=JSON.parse(response);if(json['username']=="11"){tips.innerHTML="<h2>你输入的名字是:"+json['username']+"</h2>";result=true;}else{tips.innerHTML="<h2>你输入的有误</h2>";result=false;}resultform();}functionresultform(){if(result){returntrue;}else{returnfalse;}}</script>php部分:<?phpheader("Content-Type:application/json;charset=utf-8");$data=json_decode($_GET['data'],true);echo$_GET['data'];?>
效果图:
当用户名为11时,输入正确,如图:
当用户名不是11时,输出为:
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。