ajax json個數資料獲取擴充套件（二）
阿新 • • 發佈：2019-01-29
<?php //這裡兩句話很重要，第一句話告訴瀏覽器返回的資料是xml格式 //header("Content-Type:text/xml;charset=utf-8"); //告訴瀏覽器不要快取資料 //header("Cache-Control: no-cache"); //接收資料 POST || GET 根據前面的請求方式而定 $username=$_POST["userName1"]; $info=""; if($username=="zs"){ //這裡是json資料 json是原生態的 資料格式非常穩定 描述能力很強 //可以放多組屬性 $info='[{"res":"該使用者不可以用","id":"A001","data":"2014-02-03"},{"age":"22"}]'; }else{ $info='[{"res":"該使用者可以用"}]'; } echo $info; ?>
<html>
<head>
<title>使用者註冊</title>
<script type = "text/javascript" language = "javascript">
//建立ajax引擎
function getXmlHttpObject()
{
var xmlHttp=null;
//不同的瀏覽器獲取物件xmlhttprequest 物件方法不一樣
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var myXmlHttpRequest="";
//驗證使用者名稱是否已經存在
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//判斷建立是否成功
//如果使用post方式提交則用下面的程式碼
//建議使用post方法 因為 已經解決了中文亂碼問題，可以傳送大量資料
if(myXmlHttpRequest){
var url="registerprocess2.php";
var data1="userName1="+$("userName").value;
//開啟請求
myXmlHttpRequest.open("post",url,true);
//必須加的一句話
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回撥函式 onreadystatechange狀態改變事件觸發器
myXmlHttpRequest.onreadystatechange=chuli;
//傳送請求,如果是get請求 填寫null即可
myXmlHttpRequest.send(data1);
}
}
//回撥函式
function chuli(){
//window.alert("處理函式被呼叫"+myXmlHttpRequest.readyState);//readyState 物件狀態
//取出從 伺服器頁面返回的資料
if(myXmlHttpRequest.readyState==4){
var mes=myXmlHttpRequest.responseText;
//使用eval函式將mes字串轉成對應的物件
var mes_obj=eval("("+mes+")");
$('myres').value=mes_obj[0].res;
}
}
//封裝一個方法
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="???" method="post">
使用者名稱字：<input type = "text" name = "userName" id = "userName">
<input type = "button" onclick = "checkName()" value = "驗證使用者名稱">
<input style = "border-width:0;color:red" type = "text" id = "myres">
<br/>
使用者密碼：<input type = "password" name = "password"><br>
電子郵件：<input type = "text" name = "email"><br/>
<input type = "submit" value = "使用者註冊">
</form>
<form action="???" method="post">
使用者名稱字：<input type = "text" name = "userName2" id = "userName2">
<input type = "button" value = "驗證使用者名稱">
<input style = "border-width:0;color:red" type = "text" id = "myres2">
<br/>
使用者密碼：<input type = "password" name = "password"><br>
電子郵件：<input type = "text" name = "email"><br/>
<input type = "submit" value = "使用者註冊">
</form>
</body>
</html>