您的位置：首页 > Web前端 > JavaScript

Json,Ajax（0516）

2016-05-17 14:19 429 查看

一、JSON简介：

JSON（JavaScript Object Notation）是一种轻量级的数据交换语言，以文字为基础，且易于让人阅读，同时也方便了机器进行解析和生成。JSON简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构，其可以将JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从Web客户机传递给服务器端程序。JSON采用完全独立于程序语言的文本格式，但是也使用了类C语言的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。

JSON建构有两种结构：

JSON数据语言：json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组2种结构，通过这两种结构可以表示各种复杂的结构

　　1、对象：对象在js中表示为“{}”扩起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。

　　2、数组：数组在js中是中括号“[]”扩起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。

　　经过对象、数组2种结构就可以组合成复杂的数据结构了。

Json应用例子：

<?php

//接受传递来的参数
$uid=$_POST["u"];
//查询数据库：
include ("../DBDA.class.php");
$db=new DBDA();
$sql="select count (*) from users where uid='{$uid}'";
$attr=$db->Query($sql);
if($attr[0][0]==1)
{
echo "NO";
}
else
{
echo "OK";
}

View Code
3.运行结果：

async：原意是异步的，true是指异步，false是指同步。默认为异步。

数据传输：同步：传输必须等到接收方接收到，才能传下一个。异步：传输不用等到对方接收就可以继续传递。

AJAX：同步：AJAX必须处理完才能继续向下执行。异步：AJAX在处理数据的同时代码继续往下执行

例子1：登录界面

1.主页面：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<h1>登录</h1>
<div>用户名：<input type="text" id="uid" /></div>
<div>密码：<input type="text" id="pwd" /></div>
<div><input type="button"  id="btn" value="登录" /></div>

</body>
<script type="text/ecmascript">
$(document).ready(function(e) {

$("#btn").click(function(){
var uid=$("#uid").val();
var pwd=$("#pwd").val();
$.ajax({

/*

数据传输：同步：传输必须等到接收方接收到，才能传下一个。异步：传输不用等到对方接收就可以继续传递。

AJAX：同步：AJAX必须处理完才能继续向下执行。异步：AJAX在处理数据的同时代码继续往下执行
*/

async:true,    //async原意是异步的，true是指异步，false是指同步
url:"LoginChu.php",
data:{u:uid,p:pwd},
type:"POST",
dataType:"TEXT",
success: function(data){

if(data=="OK")
{
window.location="Ajax.php";
}
else
{
alert ("用户名或密码错误!");
}

},
<!--error:function(){}  //执行失败时调用，一般不常用	 -->

});

})

});

</script>

</html>

　　

　　2.处理页面：

<?php
$uid=$_POST["u"];
$pwd=$_POST["p"];
include ("../DBDA.class.php");
$db=new DBDA();
$sql="select count(*)from users where uid='{$uid} and pwd='{$pwd}'";
$attr=$db->Query($sql);
if($attr[0][0]==1)//有数据
{
echo "OK";
}
else
{
echo "NO";
}

　　

　　3.运行结果显示：

例子2：体现同步性-----例如点击div的同时显示里面的内容

　　1.主页面：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<!--体现async同步： -->
<div id="text" style="width:200px; height:200px; background-color:#03F" ></div>

</body>
<script type="text/ecmascript">
$(document).ready(function(e) {

$("#text").click(function(){

$("#text").html("");//清空原有数据
$.ajax({
async:false,//同步ajax
url:"TextChu.php",
dataType:"TEXT",
success: function(data){

$("#text").html(data);

}

});

alert ($("#shuzu").html());

})

});

</script>

</html>

　　

　　2.处理页面：

<?php
echo "<div id='shuzu'>Hello world</div>";

　　

　　3.运行结果显示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航