使用简单例子,表单的的输入,将表单输入以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="<h1>你输入的名字是:"+json['username']+"</h1>"; result=true; } else{ tips.innerHTML="<h1>你输入的有误</h1>"; result=false; } resultform(); } functionresultform(){ if(result){ returntrue; } else{ returnfalse; } } </script> PHP部分: <?PHP header("Content-Type:application/json;charset=utf-8"); $data=json_decode($_GET['data'],true); echo$_GET['data']; ?>
效果图:
当用户名为11时,输入正确,如图: