侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

Ajax 传递JSON实例代码

前端  /  管理员 发布于 4年前   273

前面的话

  虽然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条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客