PHP18 PHP与AJAX

最新推荐文章于 2024-07-29 11:32:06 发布
最新推荐文章于 2024-07-29 11:32:06 发布
阅读量121 收藏 1
点赞数
文章标签： json php javascript ViewUI
原文链接：http://www.cnblogs.com/rask/p/9201795.html
版权

 学习要点

  • JavaScript实现Ajax
  • jQuery实现Ajax
  • JSON
  • PHP的JSON函数
  • JavaScript处理JSON数据

  

JavaScript实现Ajax

什么是Ajax

  • 搜狗地图
  • 百度搜索自动补全
  • 百度登陆验证
  • 百度用户注册验证 

使用Ajax的好处

  • Ajax的特点：无刷新——不刷新整个页面，只刷新局部。
  • 无刷新的好处
  1. 只更新部分页面，有效利用带宽
  2. 提供连续的用户体验
  3. 提供类似C/S的交互效果，操作更方面

 

传统Web与Ajax的差异

 

 

Ajax简介

  • Ajax：异步刷新技术

 

  • Ajax工作流程

 

 

备注：XML/JSON/HTML是用来封装请求或响应数据的众多数据格式中的一部分。还有如Script、JSONP、text等其他的数据格式。

 

XMLHttpRequest

  • XMLHttpRequest是整个Ajax技术的核心，提供异步发送请求的能力。
  • 创建XMLHttpRequest对象

IE5和IE6

　　xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

其他浏览器

　　xmlHttpRequest=new  XMLHttpRequest();

  • XMLHttpRequest常用属性

1.readystate: XMLHttpRequest的状态信息（就绪状态）

　　 

2.onreadystatechange：指定回调函数

3.status：HTTP的状态码

 　　

　　注意：就绪状态是4且状态码是200，方可处理服务器数据

4.statusText ：返回当前请求的响应状态

5.responseText：获得响应的文本内容

6.responseXML：获得响应的XML文档对象

  

  • XMLHttpRequest常用方法

方    法

说    明

open(

String method[,

String url[,

Boolean async[,

String user[,

String password]]]])

用于创建一个新的HTTP请求。

Method：设置请求方法，POST或者GET,对大小写不敏感。

Url:服务器地址

Async：指定请求是否是异步方式，默认true。

User：服务器需要验证，则需要填写用户名。

Password：密码。如果用户名为空，则此值被忽略。

send(String data)

发送请求到服务器端。

Data：字符串类型。此参数值取决于open方法中的method参数，如果method为POST，则该参数需要指定；如果method为GET，则该参数为null。

abort()

取消当前请求。

setRequestHeader(

String header,

  String value)

设置请求的HTTP头信息。

Header：要指定的HTTP头信息。

Value：HTTP头名称对应的值。

getResponseHeader(

  String header)

从响应中获取指定的HTTP头信息。

Header：要获取的指定HTTP头。

getAllResponseHeaders()

获取响应的所有HTTP头信息

 

实现Ajax的过程分为发送请求和处理响应两个步骤：

    1. 发送请求分为GET和POST方法。
    2. 响应有responseText和responseXML两种方式。

本次介绍处理responseText。

 

 

JavaScript实现Ajax

  • 使用Ajax发送GET请求及处理响应

客户端主要脚本：

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
function validate() {
	var uname = $("#uname").val();
	if (uname == null || uname == "") {
		$("#msg").html("用户名不能为空！");
	} else {
		//1.创建XMLHttpRequest对象
		xmlHttpRequest = createXmlHttpRequest();
		//2.设置回调函数
		xmlHttpRequest.onreadystatechange = callBack;
		//3.初始化XMLHttpRequest组件
		var url = "D01Server.php?uname=" + uname;
		xmlHttpRequest.open("get", url, true);//get方式
		//4.发送请求
		xmlHttpRequest.send(null);
	}
};

//创建XmlHttpRequest对象
function createXmlHttpRequest() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else {//返回值为false时说明是老版本IE浏览器（IE5和IE6）
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
};

//Ajax 回调函数
function callBack() {
	//读取响应结束，并且正确返回
	if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
		var data = xmlHttpRequest.responseText;
		$("#msg").html(data);
	}
}
</script>
… … 
<body>
<form action="">
<p>
用户名：<input type="text" name="uname" id="uname" οnblur="validate();">
     <span id="msg" style="color:red;"></span>
</p>
</form>
</body>

　　

服务器端主要脚本：

<meta charset="UTF-8">
<?php 
$name=$_GET['uname'];
if("admin"==$name){
	echo "用户名被占用！";
}else {
	echo "用户名可以使用";
}
?>

　　

  • 使用Ajax发送POST请求及处理响应

客户端主要脚本：

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
	function validate() {
		var uname = $("#uname").val();
		if (uname == null || uname == "") {
			$("#msg").html("用户名不能为空！");
		} else {
			//1.创建XMLHttpRequest对象
			xmlHttpRequest = createXmlHttpRequest();
			//2.设置回调函数
			xmlHttpRequest.onreadystatechange = callBack;
			//3.初始化XMLHttpRequest组件
			var url = "D02Server.php";
			xmlHttpRequest.open("post", url, true);//post方式
			xmlHttpRequest.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			//4.发送请求
			var data = "uname=" + uname;//需要发送的数据信息，name为用户名输入框获取的值
			//var data = {"uname":uname};
			xmlHttpRequest.send(data);
		}

	};

	//创建XmlHttpRequest对象
	function createXmlHttpRequest() {
		if (window.XMLHttpRequest) {
			return new XMLHttpRequest();
		} else {//返回值为false时说明是老版本IE浏览器（IE5和IE6）
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	};

	//Ajax 回调函数
	function callBack() {
		if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
			var data = xmlHttpRequest.responseText;
			if ($.trim(data) == "true") {				
				$("#msg").html("用户名已被使用！");
			} else {
				$("#msg").html("用户名可以使用！");
			}
		}
	}
</script>

　　

服务器端主要脚本：

<?php
$name=$_POST['uname'];
if("admin"==$name){
	echo "true";
}else {
	echo "false";
}
?>

 

上机练习1：实现无刷新邮箱验证

需求说明：实现无刷新验证注册邮箱

在用户注册页面，当E-mail文本框失去焦点时，判断用户是否存在。

 

 

jQuery实现Ajax

使用javascript实现ajax有很多缺点…方法、属性、常用值较多不好记忆，步骤繁琐，浏览器兼容问题。

jQuery提供了一些常用的ajax方法：$.ajax()、$.get() 、$.post()、$.getJSON()、load()。相比js实现，更加简洁和方便。

$.ajax()方法

  • 作用：通过 HTTP 请求加载远程数据。jQuery中实现ajax最底层方法，参数多，灵活性高。
  • 语法格式：

 　　　　$.ajax( [ settings ] ); 

  • 常用属性参数：

 

属性名

说    明

String url

发送请求的地址，默认为当前页地址

async

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。如果需要在回调函数中确保完成执行相关指令，把该值设置未false。

String type

请求方式（POST或GET，默认为GET）

Number timeout

设置请求超时时间

Object data 或

String data

发送到服务器的数据

String dataType

预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text

boolean global

表示是否触发全局Ajax事件，默认为true

 

  • 常用函数参数

函    数

说    明

function beforeSend(

  XMLHttpRequest xhr)

发送请求前调用的函数

参数xhr：可选

function complete(

  XMLHttpRequest xhr,

  String ts)

请求完成后调用的函数

参数xhr：可选

参数ts：可选，描述请求类型的字符串

function  success(

  Object result,String ts)

请求成功后调用的函数

参数result：可选，由服务器返回的数据

参数ts：可选，描述请求类型的字符串

function error(

  XMLHttpRequest xhr,

  String em,Exception e)

请求失败时被调用的函数

参数xhr：可选

参数em：可选，错误信息

参数e：可选，捕获的异常对象

 

  • $.ajax()实现Ajax示例代码
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
	function validate() {
		var uname = $("#uname").val();
		if (uname == null || uname == "") {
			$("#msg").html("用户名不能为空！");
		} else {
			$.ajax({
				url : "D03Server.php",
				type : "get",
				data:{"uname":uname},
				dataType : "text",
				success : function(result) {
					if ($.trim(result) == "true") {
						$("#msg").html("用户名已被使用！");
					} else {
						$("#msg").html("用户名可以使用！");
					}
				},
				error : function() {
					alert("用户名验证拾出现错误，请联系管理员！");
				}
			});
		}
	};
</script>

　　

上机练习2：使用$.ajax()方法实现异步检查注册邮箱是否已经存在。

需求说明：使用$.ajax()方法重新实现上机练习1。

注：使用jQuery提供的$.trim(String str)方法可以将传入的字符串前后空格去除。

 

$.get()

  • 语法格式：

　　　　$.get(url ,data,success(resp,status,xhr), dataType);

  • 常用参数

参数名

说    明

String url

规定将请求发送到目标URL

Object data 或

String data

可选。规定连同请求发送到服务器的数据

function success(

    Object result,

    String status,    

    XMLHttpRequest xhr)

可选。请求成功后调用的函数

参数result：可选。服务器返回的结果数据

参数status：可选。请求的状态

参数xhr：可选

String dataType

可选。预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text

  • 示例代码
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
	function validate(){
	 	var uname = $("#uname").val();
		if(uname==null || uname==""){
			$("#unameDiv").html("用户名不能为空！");
		}else{
			$.get('D04Server.php','uname='+uname,function(result){
					if($.trim(result) == "true"){
						$("#unameDiv").html("用户名已被使用！");
				    }else{
						$("#unameDiv").html("用户名可以使用！");
				    } 
				}
			);
		}
	}
</script>


<body>
	<form action="" id="form1">
		<table>
			<tr>
				<td>用 户 名：</td>
				<td><input type="text" name="uname" id="uname" οnblur="validate();" /> <font
					color="#c00fff">*</font></td>
				<td>
					<div id="unameDiv" style="display: inline"></div>
				</td>
			</tr>
		</table>
	</form>
</body>

　　

 

$.post()

  • 语法格式

　　　　$.post(url,data,success(resp,status,xhr), dataType);

  • 常用参数

参数名

说    明

String url

规定将请求发送到哪个URL

Object data 或

String data

可选。规定连同请求发送到服务器的数据

function success(

Object result,

String status,

XMLHttpRequest xhr)

可选。请求成功后调用的函数

参数result：可选，服务器返回的结果数据

参数status：可选，请求的状态

参数xhr：可选

String dataType

可选。预期服务器返回的数据类型，可用类型有：XML、HTML、Script、JSON、JSONP、text

 

  • 示例代码：

 

    <script src="script/jquery-1.12.4.js" type="text/javascript"></script>
    <script type="text/javascript">
        /** 用户名验证函数*/
        function validate() {
            var $uname = $("#uname").val();

            if ($uname == "" || $uname == null) {//客户端非空验证
                $("#msg").html("用户名为空！");
            } else {
                $.post("Server02.php",{"uname":$uname},function(result){
                    if($.trim(result)=="false"){
                        $("#msg").html("用户名不可用！");
                    }else if($.trim(result)=="true"){
                        $("#msg").html("用户名可用！");
                    }
                });
            }
        }
    </script>

　　

 

load()

  • 语法格式

　　　　$(selector).load(url ,data,function(result, status, xhr));

  • 常用参数

参数名

说    明

String url

规定将请求发送到哪个URL

Object data 或

String data

可选。规定连同请求发送到服务器的数据

function callback( 

   Object result,

   String status,

   XMLHttpRequest xhr)

可选。请求完成后调用的函数

参数result：服务器返回的结果数据

参数status：请求的状态

  • 主要代码示范
<script type="text/javascript">
	function validate(){
	 	var uname = $("#uname").val();
		if(uname==null || uname==""){
			$("#unameDiv").html("用户名不能为空！");
		}else{
			$("#unameDiv").load('D05Server.php','uname='+uname);
		}
	}
</script>
<body>
	<form action="" id="form1" >
		<table>
			<tr>
				<td>用 户 名：</td>
				<td>
					<input  type="text" name="uname" id="uname" οnblur="validate();" /> <font color="#c00fff">*</font>
				</td>
				<td>
					<div id="unameDiv" style="display: inline"></div>
				</td>
			</tr>
		</table>
	</form>
</body>

　　 

上机练习3：使用$.get()、$.post()、load()方法实现异步检查注册邮箱是否已经存在。重新实现上机练习1。

 

 

JSON

JSON简介

  • JSON（JavaScript  Object  Notation）

一种轻量级的数据交换格式。

Javascript和PHP都能操作的共同类型的数据。

通常用于在客户端和服务器之间传递数据。

　　例如：

{"id":4,"name":"梅西","pwd":"6666","role":"访客"}

  • JSON优点

JSON出现之前的数据交互方式： XML。XML难于解析，体积比较大，读写不够灵活。

JSON优点：轻量级交互语言，结构简单易于解析。

JSON定义

  • JSON对象

语法格式：var jsonObject={key:value,key:value,…}

示例：var andy={“name”:”张三”,”age”:30,”gender”:”男”}

  • JSON数组

语法格式：var jsonArr={value1,value2,…}

示例：

var employees=[

{“name”:”张三”,”age”:30,”gender”:”男”},

{“name”:”李四”,”age”:20,”gender”:”男”},

{“name”:”小郭”,”age”:31,”gender”:”男”}]

示例

问题：定义JSON格式数据并在页面输出 

 

问题分析：

  • 定义JSON格式的user对象，并在id为objectDiv的DIV元素中输出
  • 定义JSON格式的字符串数组，并在id为arrayDiv的DIV元素中输出
  • 定义JSON格式的user对象数组，并在id为objectArrayDiv的DIV元素中使用<table>输出

　　　　示例代码： 

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	//1、定义JSON格式的user对象，并在id为objectDiv的div中输出
	var user = {"id":1,"name":"张三","pwd":"000" };
	$("#objectDiv").append("ID："+user.id+"<br>")
	.append("用户名："+user.name+"<br>")
	.append("密码："+user.pwd+"<br>");
	//2、定义JSON格式的字符串数组，并在id为arrayDiv的div中输出
	var ary = ["中","美","俄"];
	for(var i=0;i<ary.length;i++) {
	$("#arrayDiv").append(ary[i]+"  ");
	}
	//3、定义JSON格式的user对象数组，并在id为objectArrayDiv的div中使用<table>输出
	var userArray = [
		{"id":2,"name":"admin","pwd":"123"},
		{"id":3,"name":"詹姆斯","pwd":"11111"},
		{"id":4,"name":"梅西","pwd":"6666"}
	];
	$("#objectArrayDiv").append("<table>")
		.append("<tr>")
		.append("<td>ID</td>")
		.append("<td>用户名</td>")
	    .append("<td>密码</td>")
		.append("</tr>");
	for(var i=0;i<userArray.length;i++) {
		$("#objectArrayDiv").append("<tr>")
			.append("<td>"+userArray[i].id+" </td>")
			.append("<td>"+userArray[i].name+" </td>")
			.append("<td>"+userArray[i].pwd+"</td>")
			.append("</tr>");
	}
	$("#objectArrayDiv").append("</table>");
	
}); 
</script>

<body>
	一、JSON格式的user对象:
	<div id="objectDiv"></div>
	<br> 
	二、JSON格式的字符串数组:
	<div id="arrayDiv"></div>
	<br> 
	三、JSON格式的user对象数组:
	<div id="objectArrayDiv"></div>
</body>

　　

使用JSON格式数据注意事项：

  1. json的分隔符（delimiter）只允许使用双引号，不能使用单引号。
  2. json名值对的"名"（冒号左边的部分），任何情况下都必须使用双引号。
  3. 最后一个值之后不能添加逗号（trailing comma）。
  4. 如下所示：

　　　　

 

使用jQuery处理JSON数据

  • $.getJSON()函数

　　　　异步发送请求到服务器端，并以JSON格式封装客户端与服务器间传递数据。即发送JSON到服务器，也接受从服务器传递过来的JSON。

  • 语法格式

　　　　$.getJSON(url,data,success(result,status, xhr))

  • 常用参数

参数名

说    明

String url

将请求发送到哪个URL

Object data  或

String data

可选。连同请求发送到服务器的数据

function success(

Object result,

String status,

XMLHttpRequest xhr)

可选。请求成功后运行的函数

参数result：服务器端响应的结果数据

参数status：请求的状态

  • 示例：使用$.getJSON实现用户名验证

　　　　客户端代码示例：

<script type="text/javascript">
function validate(){
 	var uname = $("#uname").val();
	if(uname==null || uname==""){
		$("#unameDiv").html("用户名不能为空！");
	}else{
		$.getJSON('D07Server.php',{uname:uname},function(data){
			$("#unameDiv").html(data.msg);
		});
	}
}
</script>
</head>

<body>
	<form action="" id="form1">
		<table>
			<tr>
				<td>用 户 名：</td>
				<td><input type="text" name="uname" id="uname" οnblur="validate();" /> <font
					color="#c00fff">*</font></td>
				<td>
					<div id="unameDiv" style="display: inline"></div>
				</td>
			</tr>
		</table>
	</form>
</body>

　　

　　　　服务器端代码示例：

$uname = $_GET["uname"];
if("admin"==$uname){
	echo "{\"flag\":true,\"msg\":\"<font color='red'>用户名已被使用！</font>\"}";
}else{
	echo "{\"flag\":false,\"msg\":\"<font color='green'>用户名可以使用！</font>\"}";
}

　　

如何使用get()和post()等方法处理JSON格式字符串？

方案1：使用parseJSON函数

jQuery提供了$.parseJSON(jsonstring)函数用于将JSON格式字符串转换为JSON对象。

示例代码：

         $.get("Server05.php", "uname=" + $uname, function (result) {
                    var jsresult = $.parseJSON(result);//把json格式的字符串转换为JSON对象
                    alert(jsresult);
                });

　　

方案2：指定get和post方法返回json格式数据

通过get和post方法的第四个参数指定服务器返回数据格式。、

     $.get("Server05.php", "uname=" + $uname, function (result) {
                    alert(result);
             },"json");

　　

 

上机练习4：使用$.getJSON()方法实现异步检查注册邮箱是否已经存在，验证结果返回一段JSON格式字符串，在客户端的回调方法中将返回的JSON对象信息显示到页面。重新实现上机练习1。

 

 

PHP的JSON函数

PHP处理JSON数据的相关函数有四个：

  • json_decode — 对 JSON 格式的字符串进行解码
  • json_encode — 对变量进行 JSON 编码
  • json_last_error_msg — Returns the error string of the last json_encode() or json_decode() call
  • json_last_error — 返回最后发生的错误

 

json_encode

1.概要

作用：对变量进行 JSON 编码

语法格式：

string json_encode ( mixed $value [, int $options = 0 [, int $depth = 512 ]] )

　　

返回字符串，包含了 value 值 JSON 形式的表示。

编码受传入的 options 参数影响，此外浮点值的编码依赖于 serialize_precision。

参数说明：

value：待编码的 value ，除了resource 类型之外，可以为任何数据类型。所有字符串数据的编码必须是 UTF-8。

options：转换选项，常用的有JSON_FORCE_OBJECT（转换为对象）,JSON_UNESCAPED_UNICODE（使用原字符编码转换）。

depth：设置最大深度。 必须大于0。

返回值：成功则返回 JSON 编码的 string 或者在失败时返回 FALSE 。

 

2.数组转换为JSON对象

由于js不支持关联数组，所以json_encode()只将索引数组（indexed array）转为数组格式（js数组格式），而将关联数组（associative array）转为对象格式。

示例一：将索引数组转换为数组

$arr=array("大一","大二","大三","大四","实习");
$jsonString=json_encode($arr,JSON_UNESCAPED_UNICODE);
echo $jsonString;

　　

输出JS格式数组：

 

JSON_UNESCAPED_UNICODE：JSON默认使用unicode编码，该选择则选使用原数组字符编码（原数组为UTF-8编码）。否则乱码。

 

示例二：关联数组转换为JSON格式对象

$arr=array("s1"=>"大一","s2"=>"大二","s3"=>"大三","s4"=>"大四","g1"=>"实习","time"=>2018,1314=>"318寝室");
$jsonString=json_encode($arr,JSON_UNESCAPED_UNICODE);
echo $jsonString;

　　

输出JSON对象：

 

示例三：多维数组转换为JSON对象数组

例如从数据库中使用PDOStatement对象的fetchAll()方法读出的二维数组：

$opt = array(PDO::ATTR_PERSISTENT => true, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_ORACLE_NULLS => true);//持久化优化
//***
try {
    $dbh = new PDO($dsn, $user, $password, $opt);
    //删除数据
    $sql = "SELECT * FROM grade ";
    $pdostmt = $dbh->query($sql);
    $result = $pdostmt->fetchAll();
    $jsonString = json_encode($result, JSON_UNESCAPED_UNICODE);
    echo $jsonString;
} catch (PDOException $e) {
    echo "持久化异常：" . $e->getMessage();
}

　　　　

输出JSON对象数组：

[{"gradeid":1,"gradename":"大一"},{"gradeid":2,"gradename":"大二"},{"gradeid":3,"gradename":"大三"},{"gradeid":4,"gradename":"大四"}]

　　

  

3.类转换为JSON对象

 示例一：单个对象和对象数组转换为JSON对象

定义学生类：

class Student
{
    public $studentNo;//学号
    private $studentName;//姓名
    protected $gender;//性别

    public function __construct($studentNo, $studentName, $gender)
    {
        $this->studentNo = $studentNo;
        $this->studentName = $studentName;
        $this->gender = $gender;
    }

    public function __get($propertyName)
    {
        return $this->$propertyName;
    }

    public function __set($propertyName, $propertyValue)
    {
        $this->$propertyName = $propertyValue;
    }

    public function method()
    {
        echo "This is Student Object";
    }
}

　　

实例化一个学生和一个学生数组，分别输出JSON编码输出：

$zs=new Student(2018001,"张三","男");
$students=array(
    new Student(2018001,"张三","男"),
    new Student(2018002,"李四","男"),
    new Student(2018003,"王五","女")
);
echo "PHP单个对象转换为JSON对象：".json_encode($zs,JSON_UNESCAPED_UNICODE);
echo "\n";
echo "PHP对象数组转换为JSON对象数组：".json_encode($students,JSON_UNESCAPED_UNICODE);

　　

输出结果：

PHP单个对象转换为JSON对象：{"studentNo":2018001}
PHP对象数组转换为JSON对象数组：[{"studentNo":2018001},{"studentNo":2018002},{"studentNo":2018003}]

　　

说明：

类中除了public修饰的成员变量，其他成员变量和成员方法未参与JSON编码。

 

  

json_decode

作用：将JSON格式文本转换为相应的PHP数据结构。

语法格式： 

mixed json_decode ( string $json [, bool $assoc = FALSE [, int $depth = 512 [, int $options = 0 ]]] )

 

参数说明　　

json：待解码的 json string 格式的字符串。这个函数仅能处理 UTF-8 编码的数据。
assoc：当该参数为 TRUE 时，将返回 array 而非 object 。

depth：指定递归深度。

options：JSON解码的掩码选项。 现在有两个支持的选项。 第一个是JSON_BIGINT_AS_STRING， 用于将大整数转为字符串而非默认的float类型。第二个是 JSON_OBJECT_AS_ARRAY， 与将assoc设置为 TRUE 有相同的效果。

 

示例一：将JSON对象格式的文本转换为PHP对象

$jsonString='{"studentNo":2018001,"studentName":"张三"}';
$student=json_decode($jsonString);
echo $student->studentNo."\t".$student->studentName;

　　

输出：

注意：此例中$jsonString中总是被默认转换为Object类型。如果需要转换为关联数组，则需要json_decode()需要第二个参数：$student=json_decode($jsonString，true);

 

示例二：将JSON对象数组格式的文本转换为PHP对象

$jsonString='[{"studentNo":2018001,"studentName":"张三"},{"studentNo":2018002,"studentName":"李四"},{"studentNo":2018003,"studentName":"王五"}]';
$students=json_decode($jsonString);
foreach ($students as $student) {
    echo $student->studentNo . "\t" . $student->studentName."\n";
}

　　

输出：

 

 

客户端解析JSON数据

示例代码

 

$(function(){
    $('#btn').click(function(){
         $.ajax({
             type: "GET",
             url: "server.php",
             data: {uname:$("#username").val(), uage:$("#ugage").val()},
             dataType: "json",
             success: function(data){
                         $.each(data, function(i, n){
                               alert(i+"======"+n);
                         });
                      }
         });
    });
});

 

　　

$.each()函数

不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，示例中以JSON对象数组作为参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对JSON对象数组的索引，第2个为对应JSON对象数据。

 

转载于:https://www.cnblogs.com/rask/p/9201795.html

weixin_30685029
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python 语言基础二_Python 基础知识：数据类型
weixin_47461068的博客
05-01 355
Python中基本的数据类型有Number（数字）、String（字符串）、List（列表）、Tuple（元组）、Dictionary（字典）、Set（集合）等。 用type()可以查看变量和常量的数据类型: >>> a1 = 23 >>> print(type(a1)) <class 'int'> >>> a, b, c, ...
使用PHP和Ajax实现实时搜索
05-31
使用PHP和Ajax实现实时搜索 一、 开发环境 1、环境搭建：Windows 7+Apache 2.4.18+MySQL 5.7.11+PHP 7.1.0。 2、文本编辑器：Sublime 3。 二、主要技术 本案例主要通过PHP读取XML文件，同时结合Ajax无刷新技术来实现...
jQuery详解（二) 函数和事件
sunnygao的博客
08-04 239
文章目录@[toc]四、函数1.remove():将数组中所有DOM对象及其子对象一并删除。2.empty():将数组中所有DOM对象的子对象删除。4.html():返回的结果相当于innerHTML。前四个函数的例子5.each()each实例五、事件1.定义事件监听元素1.1第一种事件绑定语法1.2第二种事件绑定方式，on 传送门：《jQuery详解第一篇》https://blog.csdn.net/gao1213977085/article/details/119256862 四、函数 ##2.第二组
Jquery map类型的json格式循环输出（key是关系类型，value是一个list）
lianghaigui的博客
04-23 2063
//[{name:"李四",sex:"男",age:"18",infoList:{adc:[{a:"adc",b:"sdc"}],....},{name:"张三",sex:"男",age:"20",infoList:{adwc:[{a:"qee",b:"adc"}],....},......}]//注意：jqu
JavaEE-09 Ajax与jQuery在JavaEE项目中的使用
weixin_30242907的博客
03-22 347
学习要点 JavaScript实现Ajax jQuery实现Ajax JSON JSON-LIB FastJSON JavaScript实现Ajax 认识Ajax 旧版百度地图 百度搜索自动补全 百度登陆 百度用户注册 使用Ajax的好处 Ajax的特点：无刷新——不刷新整个页面，只刷新局部。 无刷新的好处 只更新部分页面，有效...
PHP接收ajax传输的数据
sunsineq的专栏
10-13 1637
在网上看了很久，发现数据的利用ajax提交数据到后台其实很简单，但是很多讲解的并不清楚，对于初学者来说，很多真的是看着有点糊涂，拿来直接用，又想去了解怎么回事，其实利用ajax提交数据到后台是非常的简单的。 $.ajax({ type: "POST", url: "register.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved:
PHP+JS实现Ajax
热门推荐
程序猿的世界
05-28 1万+
Ajax一、Ajax中应用json对于大批量数据的处理：1）xml2）json1、关于json对象就是属性的无序集合在js中，可以使用{} 来模拟属性的无序集合2、关于php中的json目前，绝大多数ajax程序都使用json对象做数据的传递方式，所以在很多语言中，都内置了对json对象的支持。在php中，有这样两个函数，用于对json进行编码和解码string js...
ajax 上传文件到php
u010262729的博客
01-19 3644
作为一个开发人员，踩坑是必要的，不踩坑是不长进的。今天我们就来谈谈ajax上传文件时可能遇到的几个大坑。 html 文件： div> input type="file" id="fileloader" name="file" /> button id="fileuploader">开始上传button> div> 需要添加的js文件jquery-2.1.4.min.js，
如何用ajax调用php,如何从ajax调用php函数？
weixin_29102619的博客
03-09 1397
对于ajax请求1.在您的网页中包含Jquery库.例如：2.单击按钮调用功能Click Me3.点击按钮,在javascript中调用create function.function create () {$.ajax({url:"test.PHP",//the page containing PHP scripttype: "post",//request type,dataType: 'js...
php中ajax用法,PHP中AJAX的使用（完整实例）
weixin_28365523的博客
03-11 2620
在这呢我主要说一下AJAX的用法，原理就不多说了。1.你要用AJAX首先得会js吧，这个不用多说。首先你得NEW一个AJAX的对象，类必须得事例化才能使用，这个大家都知道对吧第一步：var oAjax = new XMLHttpRequest();但是为了兼容IE6这么蛋疼的浏览器一般这么写：if(window.XMLHttpRequest){var oAjax = new XMLHttpRequ...
PHP – AJAX 与 MySQL
01-03
PHP – AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信。 AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息： 本教程使用到的 Websites 表 SQL 文件：websites.sql。 实例 选择对应选项，...
php,ajax实现分页
12-18
1. **AJAX**（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在本例中，它用于异步请求新的分页数据。 2. **PHP** 是一种服务器端脚本语言，常用于...
ajax PHP 大文件上传
11-06
本示例探讨的是如何使用Ajax与PHP技术来处理大文件上传，这对于提升用户体验，实现无刷新页面操作至关重要。下面我们将详细讲解这个主题。 **一、Ajax介绍** Ajax（Asynchronous JavaScript and XML）是一种在无需...
.注册页面，当用户名文本框失去焦点时要验证该用户名是否在数据库中已存在，如果已存在就不能让用户注册，否则可以注册（用ajax实现）。
qazwsx_edc1的博客
07-09 1万+
后台：myPro.jsconst express=require('express');var router=express.Router();var pool=require('../pool.js');router.post('/ajaxlogin',(req,res)=&gt;{  var $uname=req.body.uname;  if(!$uname){    res.send('用...
Hutool——发送http请求案例
最新发布
专注写bug
07-29 579
在实际开发过程中，微服务环境下往往采取openfeign实现服务与服务之间的请求调用。但有时候需要调用第三方API的情况，虽然在spring boot 框架中提供了请求模板，但这个不怎么好用。市面上支持http调用的框架技术很多，比如okhttp等。本篇文章重点说明Hutool给我们封装的请求方法类。/*** 调用post 接口发送get请求* @return。
Ajax与PHP基础教程：Web开发新篇章
"Ajax与PHP基础教程的PDF文档，涵盖了Ajax和PHP的基础知识以及它们的结合使用，旨在帮助Web开发者理解和掌握这两种技术，提升Web应用的交互性和响应速度。" Ajax，即Asynchronous JavaScript and XML（异步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值