www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

圆满分析Ajax综合应用,传递JSON实例代码

2019-05-18 02:53 来源:未知

前边的话

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指1种创立交互式网页应用的网页开垦技巧。

Ajax 传递JSON实例代码,ajax传递json实例

前面的话

  固然ajax全称是asynchronous javascript and XML。但当下选用ajax本领时,传递JSON已经变为实际的正统。因为相较于XML来说,JSON轻便且方便。本文将上1篇中的实例实行改写,以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']) .'信息保存成功!"}';
}
?>

实例演示

图片 1

上述所述是作者给大家介绍的Ajax 传递JSON实例代码,希望对我们有所辅助,若是大家有任何疑问请给小编留言,小编会及时苏醒大家的。在此也非常感激大家对帮客之家网址的支撑!

传递JSON实例代码,ajax传递json实例 后边的话 纵然ajax全称是asynchronous javascript and XML。但日前应用ajax技术时,传递JSON已经产生事实上的...

  即使ajax全称是asynchronous javascript and XML。但最近利用ajax技能时,传递JSON已经变成事实上的行业内部。因为相较于XML来说,JSON轻巧且有利于。本文将上一篇中的实例进行改写,以JSON的法子来进展多少传递

AJAX = 异步 JavaScript和XML(标准通用标志语言的子集)。

前端页面

AJAX 是1种用于成立连忙动态网页的技艺。

<!-- 前端页面 -->
<!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>

通过在后台与服务器举行少许数据交流,AJAX 能够使网页达成异步更新。那意味能够在不重复加载整个网页的景观下,对网页的某有些开展翻新。

后端页面

历史观的网页(不使用 AJAX)借使必要立异内容,必须重载整个网页页面。

<?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']) .'信息保存成功!"}';
}
?>

•"xml": 返回 XML 文档,可用 jQuery 处理。

实例演示

•"html": 再次来到纯文本 HTML 新闻;包蕴的 script 标签会在插入 dom 时实行。

图片 2

•"script": 重临纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在长距离请求时(不在同一个域下),全部 POST 请求都将转为 GET 请求。(因为将动用 DOM 的 script标签来加载)

上述所述是小编给大家介绍的Ajax 传递JSON实例代码,希望对我们有所支持,假诺大家有任何疑问请给小编留言,我会及时恢复生机大家的。在此也特别多谢大家对台本之家网址的支撑!

•"json": 返回 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数据传递格局

•"jsonp": JSONP 格式。使用 JSONP 情势调用函数时,如 "myurl?callback=?" jQuery 将活动替换 ? 为准确的函数名,以推行回调函数。

•"text": 重回纯文本字符串

一、前台传递字符串变量,后台重回字符串变量(非json格式) 

  这里,为了减轻Ajax数据传递出现的方块字乱码,在字符串传递在此之前,使用javascript函数escape()对汉字字符串进行了编码,并且对回到

的字符串使用unescape()函数实行解码,使得汉字得以符合规律显示。当然了,后台PHP代码也加多了头文件,以有限协助汉字字符串不晤面世乱码。各样后台代码化解

汉字乱码问题的不二等秘书籍如下:

PHP:header('Content-Type:text/html;charset=GB2312');

 Javascript代码:

$(function(){
var my_data="前台变量";
my_data=escape(my_data) "";//编码,防止汉字乱码
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(unescape(data));//解码,显示汉字
}
});
});

 PHP代码:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
$backValue=$_POST['trans_data'];
echo $backValue." 后台返回";

二、前台传递多少个一维数组,后台重临字符串变量(非json格式)

  在非json格式下,后台只能回去字符串,假如想后台重临数组,能够选用json格式,在本文的末尾会详细介绍。

Javascript代码:

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(data);
}
});
});

PHP代码:

//读取第一个数组
$backValue="trans_data:";
$trans=$_POST['trans_data'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
//读取第二个数组
$backValue=$backValue." , trans_data1:";
$trans=$_POST['trans_data1'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
echo $backValue;

叁、前台传递多少个一维数组,后台再次来到二维数组(json格式)

Javascript代码:

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

 PHP代码:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
$backValue=array();
$backValue[0]=$_POST['trans_data'];
$backValue[1]=$_POST['trans_data1'];
echo json_encode($backValue);

4、前台传递壹维数组和2维数组,后台再次来到二维数组(json格式)

Javascript代码:

$(function(){
var my_data=new Array();
var my_data1=new Array();
var my_data2=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
my_data2[0]=my_data;
my_data2[1]=my_data1;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

PHP代码:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
$backValue=array();
$backValue=$_POST['trans_data2'];
$backValue[2]=$_POST['trans_data'];
$backValue[3]=$_POST['trans_data1'];
echo json_encode($backValue);

以上内容是小编给我们介绍的布帆无恙剖析Ajax综合运用大全,希望能够帮衬到大家!

您只怕感兴趣的稿子:

  • AJAX的围堵及跨域名分析
  • jQuery Ajax 全解析
  • 用JQuery 实现AJAX加载XML并分析的脚本
  • Jquery ajax不可能解析json对象,报Invalid JSON错误的因由和平消除决办法
  • Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
  • jQuery Ajax使用 全解析
  • jQuery Ajax 实例全深入分析
  • 一步一步学asp.net Ajax登入设计完结分析
  • jquery ajax请求实例深刻分析
  • 浅析ajax请求json数据并用js剖析(示例剖判)
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:圆满分析Ajax综合应用,传递JSON实例代码