zoukankan      html  css  js  c++  java
  • 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调用时出现错误会把所有的代码都输出那时候就得去里面提前错误

     

     

     

  • 相关阅读:
    ${}和#{}的区别,使用场景
    Mysql 面试高频题:innodb,myisam(待更)
    Python 基础
    Python 基础
    python之input(), raw_input()
    Python之回调魔法
    python之setattr,getattr,hasattr
    python之类私有成员
    python之函数式编程
    python之类定义
  • 原文地址:https://www.cnblogs.com/Duriyya/p/5497608.html
Copyright © 2011-2022 走看看