什么是JSON?

JSON(JavaScript Object Notation)是一种轻量级的数据交换语言以文字为基础,(文本数据交换格式)JSON简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构,其可以将JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,JSON采用完全独立于程序语言的文本格式,但是也使用了类C语言的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。

JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

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

<script type="text/javascript">
$(document).ready(function(e) { var a = {coode:"p001",
name:"张三",
age:30,
json:{aa:"aa",bb:"bb"},
shuzu:new Array(1,2,3,4)};
alert(a.shuzu);
alert(a.json.aa);
});

 

AJAX的一些用法及例子 

概念:

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

注意事项:

调用AJAX使用json数据,里面包含url:处理页面,data:传递数据,提交方式:一般选用post,回调函数:ajax调用成功之后返回执行该方法,ajax的返回数据类型有TEXT,JSON,XML,现在的例题是关于TEXT的。

显示页面

<!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>
<div><input type="text" id="uid" /><span id="xinxi"></span></div> </body>
<script type="text/javascript">
$(document).ready(function(e) { $("#uid").blur(function(){//失去焦点触发 //把文本的值取出来
var uid = $(this).val(); //调用ajax 里面使用json数据
$.ajax({ url:"ChuLi1.php",//处理页面
data:{u:uid},//传递的数据,json数据
type:"POST",//提交方式
dataType:"TEXT",//返回数据类型
//返回数据类型有:TEXT,JSON,XML
success: function(data){//回调函数 AJAX调用成功之后返回执行该方法 if(data=="OK")
{
var str = "该品种还不存在";
$("#xinxi").html(str);//相当于把他写进span标签中 }
else
{
var str = "<span style='color:red'>该品种已经存在!</span>";
$("#xinxi").html(str);
} }
})
}) }); </script>
</html>

  处理页面,DBDA.class.php依然和之前的一样

<?php
//接收传过来的参数
$uid = $_POST["u"];
//查数据库
include("../test0506/DBDA.class.php");
$db = new DBDA(); $sql = "select count(*) from fruit where Name = '{$uid}'"; $attr = $db->Query($sql); if($attr[0][0]==1)//等于1表示存在
{
echo "NO";
}
else
{
echo "OK";
}

  

仿照登录界面写的水果名及其代号名称的验证

 

<!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="tex" /></div><br /> <div>代号 :<input type="text" id="psw" /></div><br />
<div><input type="button" id="btn" value="登录" /></div> <div id="test" style="width:100px; height:100px; background-color:#F30"></div> </body>
</html>
<script type="text/javascript">
$(document).ready(function(e) { $("#btn").click(function(){ var tex = $("#tex").val();
var psw = $("#psw").val(); $.ajax({ url:"ChuLi2.php",
data:{t:tex,p:psw},
type:"POST",
dataType:"TEXT",
success: function(data){ if(data=="OK")
{
window.location = "test1.php";
}
else
{
alert("输入有误");
} }
});
})
}); </script>

  处理页面:ChuLi2.php

<?php

$text = $_POST["t"];
$psw = $_POST["p"]; include("../test0506/DBDA.class.php");
$db = new DBDA(); $sql = "select count(*) from fruit where Name='{$text}' and Ids='{$psw}'"; $attr = $db->Query($sql); if($attr[0][0]==1)//查到数据
{
echo "OK";
}
else
{
echo "NO";
}

 

 ajax的另一个数据:async默认是异步的,里面有两个参数false,true。async:false//同步,async:true//异步

  在ajax中同步和异步的概念:AJAX:同步:AJAX必须处理完才能继续向下执行。异步:AJAX在处理数据的同时代码继续往下执行

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

<!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>
<div id="test" style="width:100px; height:100px; background:#F00"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) { //AJAX默认是异步 $("#test").click(function(){ $("#test").html("");//点击之前清除
$.ajax({
async:false,//变为同步AJAX
url:"ChuLi3.php",
dataType:"TEXT",
success: function(data){ $("#test").html(data)//给test加div }
}); alert($("#shuju").html());
}) }); </script>

  处理页面:ChuLi3.php

<?php

echo "<div id='shuju'>hello world</div>";

另外连接数据库时会出现的一些错误:例如fetch_all()或是fetch_assoc()等出现都是SQL语句出现问题,方法就是去输出SQL语句找错误

 如果是在AJAX调用时出现错误会把所有的代码都输出那时候就得去里面提前错误

 

5月16 JSON的一些知识点及AJAX的应用的更多相关文章

  1. 20.Nodejs基础知识(上)——2019年12月16日

    2019年12月16日18:58:55 2019年10月04日12:20:59 1. nodejs简介 Node.js是一个让JavaScript运行在服务器端的开发平台,它让JavaScript的触 ...

  2. 16.go语言基础学习(上)——2019年12月16日

    2019年12月13日10:35:20 1.介绍 2019年10月31日15:09:03 2.基本语法 2.1 定义变量 2019年10月31日16:12:34 1.函数外必须使用var定义变量 va ...

  3. 11月16日《奥威Power-BI基于SQL的存储过程及自定义SQL脚本制作报表》腾讯课堂开课啦

           上周的课程<奥威Power-BI vs微软Power BI>带同学们全面认识了两个Power-BI的使用情况,同学们已经迫不及待想知道这周的学习内容了吧!这周的课程关键词—— ...

  4. 2016年12月16日 星期五 --出埃及记 Exodus 21:11

    2016年12月16日 星期五 --出埃及记 Exodus 21:11 If he does not provide her with these three things, she is to go ...

  5. 2016年11月16日 星期三 --出埃及记 Exodus 20:7

    2016年11月16日 星期三 --出埃及记 Exodus 20:7 "You shall not misuse the name of the LORD your God, for the ...

  6. 2016年10月16日 星期日 --出埃及记 Exodus 18:27

    2016年10月16日 星期日 --出埃及记 Exodus 18:27 Then Moses sent his father-in-law on his way, and Jethro returne ...

  7. 12月16日广州.NET俱乐部下午4点爬白云山活动

    正如我们在<广州.NET微软技术俱乐部与其他技术群的区别>和<广州.NET微软技术俱乐部每周三五晚周日下午爬白云山活动>里面提到的, 我们会在每周三五晚和周日下午爬白云山.   ...

  8. 2014年5月16至24日,杨学明老师为深圳创维RGB事业部提供两天的《软件测试管理》内训服务!

    2014年5月16日和24日,<在软件开发流程中构筑软件质量—软件测试管理>内训课程在深圳创维集团成功举办!来自创维研发.测试.生产等部门的管理人员和核心骨干等参加了此次培训,此次培训由研 ...

  9. 9月16日,base 福州,2018MAD技术论坛邀您一起探讨最前沿AR技术!

    “ 人工智能新一波浪潮带动了语音.AR等技术的快速发展,随着智能手机和智能设备的普及,人机交互的方式也变得越来越自然. 9月16日,由网龙网络公司.msup联合主办的MAD技术论坛将在福州举行.本次论 ...

随机推荐

  1. Twitter REST API, Streaming API

    原文链接           用Twitter自己的话来说:   REST API The REST API provides simple interfaces for most Twitter f ...

  2. Qt button和buttons区别

    假设我的鼠标左键已经按下.若移动鼠标,会发生的move事件,button返回Qt::NoButton,buttons返回LeftButton.再按下右键,会发生press事件,button返回Righ ...

  3. javascript - 内存空间

    也许很多人像我一样,觉得JS有垃圾回收机制,内存就可以不管了,以至于在全局作用域下定义了很多变量,自以为JS会自动回收,直到最近,看了阮一峰老师,关于javascript内存泄漏的文章时,才发现自己写 ...

  4. 改变input中的placeholder样式

    1.input[placeholder]{ color:#d5d5d5; } 2.input::-moz-placeholder { color: #d5d5d5; } input:-ms-input ...

  5. 陌上花开——CDQ分治

    传送门 “CDQ分治”从来都没有听说过,写了这题才知道还有这么神奇的算法. (被逼无奈).w(゚Д゚)w 于是看了不少dalao的博客,对CDQ算法粗浅地了解了一点.(想要了解CDQ的概念,可以看下这 ...

  6. python的json模块的dumps,loads,dump,load方法介绍

    dumps和loads方法都在内存中转换, dump和load的方法会多一个步骤,dump是把序列化后的字符串写到一个文件中,而load是从一个文件中读取字符串 将列表转为字符串 >>&g ...

  7. Spark多种运行模式

    1.测试或实验性质的本地运行模式(单机) 该模式被称为Local[N]模式,是用单机的多个线程来模拟Spark分布式计算,通常用来验证开发出来的应用程序逻辑上是否有问题. 其中N代表可以使用N个线程, ...

  8. CSRF攻击和防护

    攻击模拟步骤: 防护方法: 在客户端向后端请求界面数据的时候,后端会往响应中的 cookie 中设置 csrf_token 的值 在 Form 表单中添加一个隐藏的的字段,值也是 csrf_token ...

  9. 从flask视角理解angular(四)Route

    app-routing.modules.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } fro ...

  10. SpringBoot 文件上传、下载、设置大小

    本文使用SpringBoot的版本为2.0.3.RELEASE 1.上传单个文件 ①html对应的提交表单 <form action="uploadFile" method= ...