jquery与php交互的方法，通过json格式

最新推荐文章于 2021-03-09 20:04:21 发布

dyfc3sfd3s

最新推荐文章于 2021-03-09 20:04:21 发布

阅读量805

点赞数 1

之所以要用到Json，很多时候是因为使用ajax对象时，程序与JS函数之间的数据交互。因为JS不认识PHP中的数组，PHP也不认识JS中的数组或对象。Json很好的解决了这个问题。

Json简介

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript的一个子集，这意味着JavaScript可以直接读取Json，非常方便。

Json的具体形式是：
1.对象

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

例如： {“username”: “Eric”,”age”:23,”sex”: “man”}

代码示例：

<script type="text/javascript">   function getUser()
{
    var   user = {
    "username": "Eric",
    "age":23,
    "family": {"mother":"Marry","father":"Alon","brother":"Tom"}
    };   alert( user.username );   alert( user.age );   alert(user.family.brother);
}   getUser();   </script>

2、数组

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

例如： ["Eric",23, "man"]

代码示例:

<script type="text/javascript">  
 function getArray()   {   
          var arr = ["Jarry",23, ["www.xiaophper.com","wxyh_999@126.com"]]; 
          alert(arr[0]);  
          alert(arr[1]);  
          alert(arr[2][0]);  
          alert(arr[2][1]); 
  }  
         getArray(); 
 </script>

注意：对象和数组两种形式在JS中的调用时不一样啊，对象用“.”调用，数组用下标[0]、[1]调用。还要注意在传递Json串时string类型的值要用引号括起来。

PHP中将数组转变成Json
强大的PHP已经提供了内置函数：json_encode() 和 json_decode()。很容易理解，json_encode()就是将PHP数组转换成Json。相反，json_decode()就是将Json转换成PHP数组。

$array = array("name" => "Eric","age" => 23);   echo json_encode($array);

程序将打印出： {“name”:”Eric”,”age”:23}

json_encode把php的数组或者对象变为json，json_decode把json字符串变为php数组。

例子：(前端)html0919.html<!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="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<span class="dianji1">点击post1</span>
<span class="dianji2">点击post2</span>
<span class="dianji3">排行榜</span>
<span class="dianji5" style="display: none;">点击post5</span>
<p class="help1"></p>
<p>排行榜一</p>
	<table width="200" border="1" class="moreu">
	  <tr>
	    <td>名次</td>
	    <td>姓名</td>
	    <td>手机号</td>
	    <td>分数</td>
	  </tr>
	</table>
<p>排行榜二</p>
	<table width="200" border="1" class="moreu2">
	  <tr>
	    <td>名次</td>
	    <td>姓名</td>
	    <td>手机号</td>
	    <td>分数</td>
	  </tr>
	</table>
</body>
<script>
$(function(){
	$(".dianji1").click(function(){
		var flag=1;
		var url="demo0919.php";
		var name="ding";
		var mobile="18037998505";
		$('.help1').text("返回简单字符串");
		$.post(url,{flag:flag,name:name,mobile:mobile},function(res){
			alert(res);
		});
		
	});
	$('.dianji2').click(function(){
		var flag=2;
		var url="demo0919.php";
		var name="ding";
		var mobile="18037998505";
		$('.help1').text("返回json字符串处理");
		$.post(url,{flag:flag,name:name,mobile:mobile},function(res){
			alert(res);
			res=JSON.parse(res);
			alert(res.name+'>'+res.mobile+'>'+res.msg);
		});
	});
	$('.dianji3').click(function(){
		$('.help1').text("排行榜分页处理");
		moreuser2();
	});

	$('.dianji5').click(function(){
		var flag=5;
		var url="demo0919.php";
		var name="ding";
		var mobile="18037998505";
		$('.help1').text("test");
		$.post(url,{flag:flag,name:name,mobile:mobile},function(res){
			alert(res);
			res=JSON.parse(res);
			alert(res.name+'>ccc'+res["1"]);
		});
	});
	

//排行榜
moreuser();
moreuser2();
});
//排行榜(一次性读数据)
function moreuser(){
	var flag=3;
	var url="demo0919.php";
	$('.help1').text("循环处理返回");
	$.post(url,{flag:flag},function(res){
		res=JSON.parse(res);
		user_list=res.user_list;//数组
		var str='';
		for(i=0;i<user_list.length;i++){
		   str+='<tr>'+
				    '<td>'+1+'</td>'+
				    '<td>'+user_list[i]['name']+'</td>'+
				    '<td>'+user_list[i]['mobile']+'</td>'+
				    '<td>'+user_list[i]['score']+'</td>'+
				'</tr>';
		}
		$('.moreu').append(str);
	});
}

//排行榜(分页读数据)
var page_u=1;
var mingci=1;
function moreuser2(){
	//alert("page"+page_u);
	var flag=4;
	var url="demo0919.php";
	$('.help1').text("循环处理返回");
	$.post(url,{flag:flag,page:page_u},function(res){
		res=JSON.parse(res);
		user_list=res.user_list;//
		var str='';
		for(i=0;i<user_list.length;i++){
		   str+='<tr>'+
				    '<td>'+mingci+'</td>'+
				    '<td>'+user_list[i]['name']+'</td>'+
				    '<td>'+user_list[i]['mobile']+'</td>'+
				    '<td>'+user_list[i]['score']+'</td>'+
				'</tr>';
			mingci++;
		}
		$('.moreu2').append(str);
		page_u++;
	});
}
</script>
</html>
(后端)demo0919.php
<?php
	$flag=$_POST['flag'];
	$name=$_POST['name'];
	$mobile=$_POST['mobile'];
	
	if($flag==1){
		echo "姓名：".$name."联系方式:".$mobile;
		die();
	}

	if($flag==2){
		$res['name']=$name;
		$res['mobile']=$mobile;
		$res['msg']="你的话费余额10.00元";
		echo json_encode($res);
		die();
	}
	
	if($flag==3){
		$user_list=array(
		array('name'=>'A','mobile'=>'13782899911','score'=>100),
		array('name'=>'B','mobile'=>'13782899912','score'=>99),
		);	
		$res['msg']="okok";
		$res['user_list']=$user_list;
		echo json_encode($res);
		die();
	}

	$user_list=array(
		array('name'=>'A','mobile'=>'13782899911','score'=>100),
		array('name'=>'B','mobile'=>'13782899912','score'=>99),
		array('name'=>'D','mobile'=>'13782899911','score'=>98),
		array('name'=>'E','mobile'=>'13782899912','score'=>97),
		array('name'=>'F','mobile'=>'13782899911','score'=>96),

		array('name'=>'G','mobile'=>'13782899912','score'=>90),
		array('name'=>'H','mobile'=>'13782899911','score'=>80),
		array('name'=>'I','mobile'=>'13782899912','score'=>79),
		array('name'=>'G','mobile'=>'13782899911','score'=>74),
		array('name'=>'K','mobile'=>'13782899912','score'=>71),

		array('name'=>'张三','mobile'=>'13782899911','score'=>60),
		array('name'=>'李四','mobile'=>'13782899912','score'=>59),
		array('name'=>'王五','mobile'=>'13782899911','score'=>58),
		array('name'=>'赵六','mobile'=>'13782899912','score'=>57),
		array('name'=>'甲','mobile'=>'13782899911','score'=>56),

		array('name'=>'乙','mobile'=>'13782899912','score'=>40),
		array('name'=>'丙','mobile'=>'13782899911','score'=>30),
		array('name'=>'丁','mobile'=>'13782899912','score'=>29),
		array('name'=>'小红','mobile'=>'13782899911','score'=>24),
		array('name'=>'小明','mobile'=>'13782899912','score'=>21),
		);
	$page=$_POST['page'];
	$size=5;
	$start=($page-1)*$size;	
	if($flag==4){
		$fenye_list=array();
		for($i=$start;$i<($start+$size);$i++){
			$fenye_list[]=$user_list[$i];
		}
		$res['user_list']=$fenye_list;
		$res['msg']="page".$page."size".$size."start".$start."flag".$flag;
		echo json_encode($res);
		die();
	}
	
	if($flag==5){
		//$array = array("name" => "Eric","age" => 23);
		$array = array("name"=> "Eric",1=> 23);
		echo json_encode($array);
		die();
	}
	
	// $array = array("name"=> "Eric",1=> 23);
	// 	echo json_encode($array);
?>