返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Ajax如何传递JSON
  • 498
分享到

Ajax如何传递JSON

2024-04-02 19:04:59 498人浏览 薄情痞子
摘要

这篇文章主要介绍了ajax如何传递JSON,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前面的话  虽然ajax全称是asynchronou

这篇文章主要介绍了ajax如何传递JSON,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

前面的话

  虽然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>
<h3>员工查询</h3>  
<label>请输入员工编号:</label>
<input type="text" id="keyWord">
<button id="search">查询</button>
<p id="searchResult"></p>
<h3>员工创建</h3>
<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>

//查询
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();
}

//创建
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;
        }
        
      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

感谢你能够认真阅读完这篇文章,希望小编分享的“Ajax如何传递JSON”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网JavaScript频道,更多相关知识等着你来学习!

--结束END--

本文标题: Ajax如何传递JSON

本文链接: https://www.lsjlt.com/news/74058.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Ajax如何传递JSON
    这篇文章主要介绍了Ajax如何传递JSON,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前面的话  虽然ajax全称是asynchronou...
    99+
    2024-04-02
  • Ajax中如何实现数据传递
    这篇文章主要为大家展示了“Ajax中如何实现数据传递”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax中如何实现数据传递”这篇文章吧。 ...
    99+
    2024-04-02
  • 如何接收ajax传的json数据
    要接收通过AJAX传递的JSON数据,需要使用服务器端的编程语言来处理和解析数据。下面是一个示例,使用PHP来接收AJAX传递的JS...
    99+
    2023-09-13
    ajax json
  • 小程序页面如何传递json
    在小程序页面中传递json的方法使用wx.navigateTo对页面进行跳转,并将json对象转化成string;var json = this.data.notes[e.currentTarget.id]&n...
    99+
    2024-04-02
  • jquery的ajax如何向后台传递数组
    jQuery是一款流行的前端JavaScript框架,它提供了丰富的功能和组件,其中之一就是Ajax。在Ajax中,我们经常需要向后台传递数据,无论是单个值还是多个值。本文将介绍如何使用jQuery的Ajax向后台传递数组。序列化数组在传递...
    99+
    2023-05-18
  • Python | 爬虫的request.post如何传递json参数
    文章目录 在Python中的requests库中,使用post()方法发送POST请求,如果需要传递JSON格式的数据,则可以设置请求头Content-Type为"application/j...
    99+
    2023-09-01
    python json 开发语言 request 爬虫
  • ajax如何实现回调函数参数传递
    这篇文章主要介绍ajax如何实现回调函数参数传递,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 属性方法是可以带参数: 复制代码 代码如下:functi...
    99+
    2024-04-02
  • Go:如何传递 JSON 响应而不解组它
    大家好,我们又见面了啊~本文《Go:如何传递 JSON 响应而不解组它》的内容中将会涉及到等等。如果你正在学习Golang相关知识,欢迎关注我,以后会给大家带来更多Golang相关文章,希望我们能一...
    99+
    2024-04-05
  • 如何使用ajax传递数组及后台接收
    这篇文章主要介绍了如何使用ajax传递数组及后台接收,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言我们在使用ajax异步的提交多选框得到...
    99+
    2024-04-02
  • Ajax中如何通过response在后台传递数据
    这篇文章主要为大家展示了“Ajax中如何通过response在后台传递数据”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax中如何通过response在后台...
    99+
    2024-04-02
  • SpringMVC五种类型参数传递及json传递参数
    目录案例分析:1.pom.xml2.ServletContainersInitConfig3.SpringMvcConfig4.UserController5.Address6.Us...
    99+
    2024-04-02
  • 如何解决使用ajax传递json到前台中文出现问号乱码的问题
    这篇文章主要为大家展示了“如何解决使用ajax传递json到前台中文出现问号乱码的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决使用ajax传递js...
    99+
    2024-04-02
  • Django中数据在前后端传递的方式之表单、JSON与ajax
    目录前言先说简单的:复杂一点的 Ajax 与 JSON总结前言 最近用Django写项目的时候用到了数据的传递,一窍不通,查了点资料。记录一下。水平不高,瓜不保熟。  从两...
    99+
    2024-04-02
  • Ajax如何调用restful接口传送Json格式数据
    小编给大家分享一下Ajax如何调用restful接口传送Json格式数据,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!ajax传...
    99+
    2024-04-02
  • ajax中怎么传递多个参数
    今天就跟大家聊聊有关ajax中怎么传递多个参数,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。具体内容如下<html > <...
    99+
    2024-04-02
  • 如何在spring mvc中controller的对象如何利用ajax进行传递
    如何在spring mvc中controller的对象如何利用ajax进行传递?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。基础类型如果传递的json数据为基础类型(Int,S...
    99+
    2023-05-31
    springmvc ajax controller
  • Ajax怎么传输Json和xml数据
    小编给大家分享一下Ajax怎么传输Json和xml数据,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!ajax传输xml数据:只要...
    99+
    2024-04-02
  • 前端与后端传递数据 — — JSON
    前端与后端传递数据 — — JSON 1 前端传送JSON数据给后端 1.1 application/x-www-form-urlencoded默认格式 1.1.1 通过HttpServletReq...
    99+
    2023-10-27
    json 前端 java Content-Type
  • 如何使用easyui从servlet传递json数据到前端页面
    这篇文章给大家分享的是有关如何使用easyui从servlet传递json数据到前端页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 两种方法获取的数据在servle...
    99+
    2024-04-02
  • ajax怎么动态传递jsp等页面
    这篇文章主要讲解了“ajax怎么动态传递jsp等页面”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ajax怎么动态传递jsp等页面”吧! ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作