JSON与AJAX详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42402975/article/details/84874641

什么是json?

JSON已经成为最流行的数据交换（前后台交换）格式之一，各大网站的API几乎都支持它

json数据格式 –对象表示为键值对; 数据由逗号分隔; 花括号保存对象; 方括号保存数组

什么是ajax

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

jquery的ajax请求的格式。

$.ajax({

type:"post",//请求方式

url:$form.attr('action'),//请求地址

data:$form.serialize(),

dataType:'json',//json格式的数据

success:function(data){//服务器返回的数据 }

});

php操作json
json_encode— 对变量进行 JSON 编码

语法:string json_encode ( mixed $value [, int $options = 0 ] )

返回值:编码成功则返回一个以 JSON 形式表示的 string 或者在失败时返回 FALSE 。

json_decode — 对 JSON 格式的字符串进行编码

语法:mixed json_decode ( string $json [, bool $assoc = false [, int $depth = 512 [, int $options = 0 ]]] )

这里有一个例子

<?php
$arr = array('1001'=>array('name'=>'张三'),'1002'=>'b','1003'=>'c');
$json = json_encode($arr,JSON_UNESCAPED_UNICODE );
echo $json;

输出结果为：

{"1001":{"name":"张三"},"1002":"b","1003":"c"

JQUERY -AJAX的get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：$.get(URL,callback);

URL：必需的 URL 参数规定您希望请求的 URL。

callback:可选的 callback 参数是请求成功后所执行的函数名。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个回调参数存有请求的状态。

jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:$.post(URL,data,callback);
URL：必需的 URL 参数规定您希望请求的 URL。
data：可选的 data 参数规定连同请求发送的数据。
callback：可选的 callback 参数是请求成功后所执行的函数名。

第三个参数（callback）是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

JSON和JS对象互转

要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法:

要实现从 JSON 转换为对象，使用 JSON.parse() 方法:

通过学号查询学生的例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
</head>
<body>
学号:<input type="text" id="no">
<button type="button" id="btn">查询</button>
<script type="text/javascript">
$(function(){
$('#btn').click(function() {
var no = $('#no').val();
$.post('demo.php',{no:no},function(data){
var obj = JSON.parse(data);//json=>js
// console.log(data);
if (obj.errcode==0) {
var student = obj.data;
alert('找到了，'+student.name);
}else{
alert(obj.msg);
}
})
})
})
</script>
</body>

<?php
$no = $_POST['no'];
$conn = @new mysqli('localhost','root','','myschool');
if ($conn->connect_error) {
die('连接数据库失败');
}
$conn->set_charset('utf8');
$no = htmlspecialchars(addslashes($no));
$sql = "select * from student where no='$no'";
$ret = $conn->query($sql);
$row = $ret->fetch_assoc();
$conn->close();
if($row){
echo json_encode(array('errcode'=>0,'data'=>$row));
}else{
echo json_encode(array('errcode'=>1,'msg'=>'查无此人'));
}

json与ajax