深入理解ajax系列第四篇：请求实例(2)_H5之家 - 中国HTML5教程资源分享第一站

下面以一个实例来说明GET和POST两种请求方式的应用

==> body{font-size: 30px;margin: 0;line-height: 1.5;} select,button,input{font-size: 30px;line-height: 1.5;} > ===>员工创建==> => ===> => ==> oSearch = document.getElementById('search'); (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){ //实际操作 document.getElementById('searchResult').innerHTML = xhr.responseText; }else{ alert('发生错误：' + xhr.status); } } } //发送请求 var url = 'service.php'; url = addURLParam(url,'number',document.getElementById('keyword').value); xhr.open('get',url,true); xhr.send(); } oSave = document.getElementById('save'); (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; : : : : //custom button break; : //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){ //实际操作 document.getElementById('createResult').innerHTML = xhr.responseText; }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'))); } > { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } //设置页面内容的html编码格式是utf-8，内容是纯文本 header("Content-Type:text/plain;charset=utf-8"); $staff = array( array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>'总经理'), array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>'开发工程师'), array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>'产品经理') ); ($_SERVER["REQUEST_METHOD"] == "GET"){ search(); }else if($_SERVER["REQUEST_METHOD"] == "POST"){ create(); } { (!isset($_GET['number']) || empty($_GET['number'])){ echo '参数错误'; return; } global $staff; $number = test_input($_GET['number']); $result = '没有找到员工'; //遍历$staff多维数组，查找key值为number的员工是否存在。如果存在，则修改返回结果 foreach($staff as $value){ if($value['number'] == $number){ $result = "找到员工：员工编号为" .$value['number'] ."，员工姓名为" .$value['name'] ."，员工性别为" .$value['sex'] ."，员工职位为" .$value['job']; break; } } echo $result; } { //判断信息是否填写完全 if(!isset($_POST['name']) || empty($_POST['name']) || !isset($_POST['number']) || empty($_POST['number']) || !isset($_POST['sex']) || empty($_POST['sex']) || !isset($_POST['job']) || empty($_POST['job']) ){ echo "参数错误，员工信息填写不全"; return; } echo "员工" .test_input($_POST['name']) ."信息保存成功!"; } ?>

分享给小伙伴们：

本文标签： ajax/">ajax

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻