溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間:2020-07-28 07:46:07 來源:網絡 閱讀:405 作者:蝸牛oscersong 欄目:開發(fā)技術

使用簡單例子,表單的的輸入,將表單輸入以JSON的形式傳入,并后臺返回JSON格式,使用js函數處理,進行顯示,進一步熟悉了ajax的用法,以及JSON的的使用。例子如下:

html部分:
<form action="test1.php" method="get" onsubmit="return check();"> 
	<label for="username">用戶名&nbsp;</label><input type="text" placeholder="請輸入用戶名" id="username"><br>
	<label for="usernum">&nbsp;學號&nbsp;</label><input type="text" placeholder="請輸入學號" id="usernum" onblur="checkform();"><br>
    <input type="submit" value="提交">
   <div id="tips"></div>
 </form>
 js部分:
 <script>
		var xmlobj;
		var result=false;
		function createXMLHttpRequest(){
			if(window.ActiveXObject){
                xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
			}
			else if(window.XMLHttpRequest){
				xmlobj=new XMLHttpRequest();
			}
		}
		function check(){
			if(resultform()){
				return true;
			}
			else{
				return false;
			}
		}
    function checkform(){
            var usernameobj=document.getElementById('username').value;
			var usernumobj=document.getElementById('usernum').value;
			var data={username:usernameobj,usernum:usernumobj};
			var jsonobj=JSON.stringify(data);//將對象轉換為JSON串,通過ajax進行傳遞
            var cb = ajaxResultdeal; 
			url='test.php?data='+jsonobj+"&r="+Math.random();
             toAjax(url,cb);
      }
			
    function toAjax(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);
		}
		function ajaxResultdeal(response){
            
			  var tips=document.getElementById('tips');
			  var json=JSON.parse(response);
			    if(json['username']=="11"){
			      tips.innerHTML="<h2>你輸入的名字是:"+json['username']+"</h2>";
				  result=true;
			    }
			    else{
			    	tips.innerHTML="<h2>你輸入的有誤</h2>";
			    	result=false;
			    }

              resultform();
               
			}
		
  function resultform(){
	if(result){
		return true;
	}
	else{
		
		return false;
	}
}
	</script>
php部分:
<?php
 header("Content-Type:application/json;charset=utf-8");


  $data = json_decode($_GET['data'],true);

  echo  $_GET['data'];
  ?>

效果圖:

當用戶名為11時,輸入正確,如圖:

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

當用戶名不是11時,輸出為:

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

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI