主页 > 知识库 > Ajax 传递JSON实例代码

Ajax 传递JSON实例代码

热门标签:银行业务 电子围栏 团购网站 Linux服务器 阿里云 服务器配置 科大讯飞语音识别系统 Mysql连接数设置

前面的话

  虽然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-8
header("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实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:
  • php基于jquery的ajax技术传递json数据简单实例
  • jsp中利用jquery+ajax在前后台之间传递json格式参数
  • 如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
  • ajax+json+Struts2实现list传递实例讲解
  • JSP中获取ExtJS.Ajax前台传递的JSON数据实现过程
  • Ajax中数据传递的另一种模式 javascript Object Notation思想(JSON)
  • $.ajax json数据传递方法

标签:蚌埠 广元 衡水 萍乡 大理 衢州 江苏 枣庄

巨人网络通讯声明:本文标题《Ajax 传递JSON实例代码》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266