前面的話
雖然ajax全稱是asynchronous javascript and XML。但目前使用ajax技術時，傳遞JSON已經成為事實上的標準。因為相較于XML而言，JSON簡單且方便。本文將上一篇中的實例進行改寫，以JSON的方式來進行數據傳遞
前端頁面
<!-- 前端頁面 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{font-size: 20px;margin: 0;line-height: 1.5;}select,button,input{font-size: 20px;line-height: 1.5;}</style></head><body><h2>員工查詢</h2> <label>請輸入員工編號:</label><input type="text" id="keyword"><button id="search">查詢</button><p id="searchResult"></p><h2>員工創建</h2><form id="postForm"> <label>請輸入員工姓名：</label> <input type="text" name="name"><br> <label>請輸入員工編號：</label> <input type="text" name="number"><br> <label>請輸入員工性別：</label> <select name="sex"> <option value="男">男</option> <option value="女">女</option> </select><br> <label>請輸入員工職位：</label> <input type="text" name="job"><br> <button id="save" type="button">保存</button> </form><p id="createResult"></p><script>/*get*///查詢var oSearch = document.getElementById('search');//get方式添加數據function addURLParam(url,name,value){ url += (url.indexOf("?") == -1 ? "?" : "&"); url +=encodeURIComponent(name) + "=" + encodeURIComponent(value); return url;}oSearch.onclick = function(){ //創建xhr對象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //異步接受響應 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //實際操作 var data = JSON.parse(xhr.responseText); if(data.success){ document.getElementById('searchResult').innerHTML = data.msg; }else{ document.getElementById('searchResult').innerHTML = '出現錯誤：' +data.msg; } }else{ alert('發生錯誤：' + xhr.status); } } } //發送請求 var url = 'service.php'; url = addURLParam(url,'number',document.getElementById('keyword').value); xhr.open('get',url,true); xhr.send();}/*post*///創建var oSave = document.getElementById('save');//post方式添加數據function serialize(form){ var parts = [],field = null,i,len,j,optLen,option,optValue; for (i=0, len=form.elements.length; i < len; i++){ field = form.elements[i]; switch(field.type){ case "select-one": case "select-multiple": if (field.name.length){ for (j=0, optLen = field.options.length; j < optLen; j++){ option = field.options[j]; if (option.selected){ optValue = ""; if (option.hasAttribute){ optValue = (option.hasAttribute("value") ? option.value : option.text); } else { optValue = (option.attributes["value"].specified ? option.value : option.text); } parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue)); } } } break; case undefined: //fieldset case "file": //file input case "submit": //submit button case "reset": //reset button case "button": //custom button break; case "radio": //radio button case "checkbox": //checkbox if (!field.checked){ break; } /* falls through */ default: //don't include form fields without names if (field.name.length){ parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); } } } return parts.join("&");}oSave.onclick = function(){ //創建xhr對象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //異步接受響應 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //實際操作 var data = JSON.parse(xhr.responseText); if(data.success){ document.getElementById('createResult').innerHTML = data.msg; }else{ document.getElementById('createResult').innerHTML = '出現錯誤：'+data.msg; } }else{ alert('發生錯誤：' + xhr.status); } } } //發送請求 xhr.open('post','service.php',true); xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(serialize(document.getElementById('postForm')));}</script></body></html>
新聞熱點
疑難解答
圖片精選
