5月16 JSON的一些知识点及AJAX的应用

什么是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="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="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调用时出现错误会把所有的代码都输出那时候就得去里面提前错误

 

 

 

原文地址:https://www.cnblogs.com/Duriyya/p/5497608.html