ajax小demo-----ajax中json的使用

前端之家收集整理的这篇文章主要介绍了ajax小demo-----ajax中json的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用简单例子,表单的的输入,将表单输入以JSON的形式传入,并后台返回JSON格式,使用js函数处理,进行显示,进一步熟悉了ajax的用法,以及JSON的的使用。例子如下:

html部分:
<formaction="test1.PHP"method="get"onsubmit="returncheck();">
	<labelfor="username">用户名&nbsp;</label><inputtype="text"placeholder="请输入用户名"id="username"><br>
	<labelfor="usernum">&nbsp;学号&nbsp;</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时,输入正确,如图:

wKioL1cnINLS--nHAAAuceDgEdc809.jpg

用户名不是11时,输出为:

wKiom1cnICWw2krtAAAtokV0QVI383.jpg

原文链接:https://www.f2er.com/ajax/162227.html

猜你在找的Ajax相关文章