当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery基于ajax操作json数据简单示例

jQuery基于ajax对json操作的实例

  • 发布时间:
  • 作者:码农之家
  • 点击:175

这篇文章主要知识点是关于jQuery、ajax、json、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF作者:(印) 乔希 (Joshi,V.) 著,
立即下载

jQuery基于ajax操作json数据简单示例

本文实例讲述了jQuery基于ajax操作json数据的方法。分享给大家供大家参考,具体如下:

jQuery Ajax 实例演示

jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式。

Xml与json的比较

1、可读性

JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负。

2、可扩展性

XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。

3、编码难度

XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工 具也能写出JSON的代码,可是要写好XML就不太容易了。

4、解码难度

XML的解析得考虑子节点父节点,让人头昏眼花,而JSON的解析难度几乎为0。这一点XML输的真是没话说。

<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script language="javascript" src="../lib/jquery.js"></script>
<script language="javascript">
$(document).ready(function ()
{
  $('#send_ajax').click(function (){
   var params=$('input').serialize(); //序列化表单的值
   $.ajax({
    url:'ajax_json.php', //后台处理程序
    type:'post',     //数据发送方式
    dataType:'json',   //接受数据格式
    data:params,     //要传递的数据
    success:update_page //回传函数(这里是函数名)
   });
  });
//$.post()方式:
$('#test_post').click(function (){
  $.post(
   'ajax_json.php',
   {
    username:$('#input1').val(),
    age:$('#input2').val(),
    sex:$('#input3').val(),
    job:$('#input4').val()
   },
   function (data) //回传函数
   {
    var myjson='';
    eval('myjson=' + data + ';');
    $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']);
   }
  );
  });
//$.get()方式:
$('#test_get').click(function ()
 'ajax_json.php',
   {
    username:$("#input1").val(),
    age:$("#input2").val(),
    sex:$("#input3").val(),
    job:$("#input4").val()
   },
   function(data) //回传函数
   {
    var myjson='';
    eval("myjson=" + data + ";");
    $("#result").html(myjson.job);
   }
  );
});
});
function update_page (json) //回传函数实体,参数为XMLhttpRequest.responseText
{
var str="姓名:"+json.username+"<br />";
str+="年龄:"+json.age+"<br />";
str+="性别:"+json.sex+"<br />";
str+="工作:"+json.job+"<br />";
str+="追加测试:"+json.append;
$("#result").html(str);
}
</script>
<body>
<div id="result" ></div>
<form id="formtest" action="" method="post">
  <p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>
  <p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>
  <p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>
  <p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">提交</button>
<button id="test_post">POST提交</button>
<button id="test_get">GET提交</button>
</body>
</html>

PHP 文件 ajax_json.php:

<?php
//$arr = $_POST; //若以$.get()方式发送数据,则要改成$_GET.或者干脆:$_REQUEST
$arr = $_REQUEST;
$arr['append'] = '测试字符串';
//print_r($arr);
$myjson = my_json_encode($arr);
echo $myjson;
function my_json_encode($phparr)
{
  if(function_exists("json_encode"))
  {
   return json_encode($phparr);
  }
  else
  {
   require_once 'json/json.class.php';
   $json = new Services_JSON;
   return $json->encode($phparr);
  }
}
?>

希望本文所述对大家jQuery程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • jQuery Ajax File Upload使用实例解析
  • 本文实例为大家分享了jQuery Ajax File Upload实例源码,供大家参考,具体内容如下 项目结构 Default.aspx Upload.aspx Scripts/ style.css 效果图 客户端html代码 %@ Page Language=vb AutoEventWireup=false CodeBehind=UploadFile.aspx.vb Inherits=Web.UploadFile % !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head runat=server title/title link rel=Stylesheet type……

  • jQuery Ajax 全局调用封装代码
  • 有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! 【嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人】 jQuery Ajax通用js封装 第一步:引入jQuery库 script type=text/javascript src=/js/jq……

  • jquery Ajax解析XML数据代码实例
  • $.ajax({ async: true, // 默认true(异步请求) cache: true, // 默认true,设置为 false 将不会从浏览器缓存中加载请求信息。 type: POST, // 默认:GET 请求方式:[POST/GET] dataType: xml, //默认[xml/html] 返回数据类型:[xml / html / script / json / jsonp] url: Test.ashx, // 默认当前地址,发送请求的地址 data: { key: value }, // 发送到服务器的数据 error: function(xml) { alert(Error loading XML document + xml); }, // 请求失败时调用 timeout: 1……

  • jQuery使用ajaxSubmit()提交表单方法步骤
  • ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示: script src=http://code.jquery.com/jquery-1.11.0.min.js/script script src=http://malsup.github.io/jquery.form.js/script 那么,如何通过ajaxSubmit(obj)提交数据呢?首先我们需要一个form: XHTML form 标题:input type=text name=title /br / 内容:textarea name=contenttextarea/br / button提交/button /form 上面是一个需要提交内……

  • jQuery Ajax数据加载知识点总结
  • 加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为: div/divbuttonload/button 同目录下的 test.html 文件内容为: spantest/span 我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上: $(button).click(function() { $(div).load(test.html); }); 点击按钮后: 加载 JSON JSON 即 Javascript Object Notation,直译过来即 Javascript 对象表示法,因此它能很方便地表示……

  • 如何使用jQuery+ajax实现鼠标单击修改内容
  • 现有表格中的一行的代码如下所示: tr tdspan class=catid2/span/td td公司介绍/td td内部栏目/td tdspan class=listorder title=点击修改2/span/td/tr 要实现鼠标单击修改内容思路如下: 1、点击栏目排序栏目中的数字,获取同一行的第一列中的内容,即栏目id 2、隐藏栏目排序中的数字 3、在栏目排序列中插入input框,并在input框中显示栏目排序中的内容,并设置为焦点 4、修改input中的内容,失去焦点……

    相关电子书
    学习笔记

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757