欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

Ajax传递JSON实例代码有哪些

来源:本站整理 作者:佚名 时间:2017-06-26 TAG: 我要投稿

虽然ajax全称是asynchronous javascript and XML。但目前使用ajax技术时,传递JSON已经成为事实上的标准。因为相较于XML而言,JSON简单且方便。本文将上一篇中的实例进行改写,以JSON的方式来进行数据传递
前端页面
 lang="en">
 charset="UTF-8">
Document
body{font-size: 20px;margin: 0;line-height: 1.5;}
select,button,input{font-size: 20px;line-height: 1.5;}
员工查询
请输入员工编号:
 type="text" id="keyword">
 id="search">查询
 id="searchResult">
员工创建
 id="postForm">
 请输入员工姓名:
  type="text" name="name">
 请输入员工编号:
  type="text" name="number">
 请输入员工性别:
  name="sex">
  value="男">男
  value="女">女
 
 请输入员工职位:
  type="text" name="job">
  id="save" type="button">保存
 id="createResult">
/*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("&");

[1] [2]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载