Ajax 传递JSON实例代码-侯体宗的博客

Ajax 传递JSON实例代码
前端 / 管理员发布于 3年前 126

前面的话

　　虽然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>

后端页面

<?php //用于过滤不安全的字符function test_input($data) {  $data = trim($data);  $data = stripslashes($data);  $data = htmlspecialchars($data);  return $data;}//设置页面内容的html编码格式是utf-8header("Content-Type:application/json;charset=utf-8");//定义一个多维数组，包含员工的信息，每条员工信息为一个数组$staff = array(  array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>'总经理'),  array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>'开发工程师'),  array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>'产品经理')  );//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法if($_SERVER["REQUEST_METHOD"] == "GET"){  search();}else if($_SERVER["REQUEST_METHOD"] == "POST"){  create();}//通过员工编号搜索员工function search(){  //检查是否有员工编号的参数  //isset检测变量是否设置；empty判断值是否为空  if(!isset($_GET['number']) || empty($_GET['number'])){    echo '{"success":false,"msg":"参数错误"}';    return;  }  global $staff;  $number = test_input($_GET['number']);  $result = '{"success":false,"msg":"没有找到员工"}';  //遍历$staff多维数组，查找key值为number的员工是否存在。如果存在，则修改返回结果  foreach($staff as $value){    if($value['number'] == $number){      $result = '{"success":true,"msg":"找到员工：员工编号为' .$value["number"] .'，员工姓名为' .$value["name"] .'，员工性别为' .$value["sex"] .'，员工职位为' .$value["job"] .'"}';      break;    }  }  echo $result;}//创建员工function create(){  //判断信息是否填写完全  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 '{"success":false,"msg":"参数错误，员工信息填写不全"}';    return;  }  echo '{"success":true,"msg":"员工' .test_input($_POST['name']) .'信息保存成功!"}';}?>

实例演示

以上所述是小编给大家介绍的Ajax 传递JSON实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！

上一条：
Vue实现PC端靠边悬浮球的代码
下一条：
Laravel validate error处理,ajax,json示例

0条评论 (评论内容有缓存机制,请悉知!)