json与ajax

最新推荐文章于 2022-04-29 08:56:10 发布

lxz__lj

最新推荐文章于 2022-04-29 08:56:10 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/lxz__lj/article/details/84864612

版权

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

php操作JSON有两个函数分别是

json_encode 对变量进行 json的编码只能接受UTF-8的编码数据

json_decode json的解码

<?php
$arr = array('a''b','c');
$json = json_encode($arr);
//生成json字符串
echo $json;

输出的是一个["a","b","c"]

<?php
$arr = array('1001'=>'aa','1002'=>'b','1003'=>'c');
$json = json_encode($arr);
//生成json字符串
echo $json;

输出的为{"1001":"a","1002":"b","1003":"c"}

<?php
$arr = array('1001'=>'张三','1002'=>'b','1003'=>'c');
$json = json_encode($arr);
//生成json字符串
echo $json;

对于中文就会输出一个编码

如果输出中文

<?php
$arr = array('1001'=>array('name'=>'张三'),'1002'=>'b','1003'=>'c');
$json = json_encode($arr，JSON_UNESCAPED_UNICODE);
//生成json字符串
echo $json;

json数据格式

-对象表示为键值对

-数据由逗号分隔

-花括号保存对象

-方括号保存数组

接下来说一下AJAX

AJAX= 异步JAVAScript和XML

常用的操作有

$.get $.post $.ajax

这三个都是Jquery里面的AJAX，如果我们用JS原生态的AJAX写起来是非常麻烦的

我们不建议使用原生态的AJAX

ajax是前台的技术并不是php的技术属于前端的技术

GET（） POST（）方法

get 从指定的资源请求数据

post 向制定的资源提交要处理的数据

get基本上用于从服务器获得（取回）数据可能会返回一些缓存的数据

引入一个HTML文件必须有bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
</head>
<body>
    <input type="text" id="txt">
    <button type="button" id="btn">执行</button>

     <script type="text/javascript">
     $(function (){
         $('#btn').click(function () {
             $.get(demo.php,function (data) {
                 $('#txt').val(data);
             })
         })
     })
     </script>
</body>
</html>

在demo.php文件中

<?php

$str ="张三"；
echo $str;

输出一个结果

<?php
$arr = array('1001'=>array('name'=>'张三'),'1002'=>'b','1003'=>'c');
$json = json_encode($arr，JSON_UNESCAPED_UNICODE);
//生成json字符串
// echo $json;
// $str = "张三";
echo $json;

这是demo.php

在默认的情况下，获取的话得到的是一个整个的json字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
</head>
<body>
    <input type="text" id="txt">
    <button type="button" id="btn">执行</button>

     <script type="text/javascript">
     $(function (){
         $('#btn').click(function () {
             $.get(demo.php,function (data) {
                 var obj = JSON.parse(data)  //json=>js对象
                 $('#txt').val(obj.sex);
             })
         })
     })
     </script>
</body>
</html>

这是前台如何处理json 与js对象

用post

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
</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对象
                //  $('#txt').val(obj.sex);
                console.log(data);
             })
         })
     })
     </script>
</body>
</html>

demo.php

<?php
// $arr = array('1001'=>array('name'=>'张三'),'1002'=>'b','1003'=>'c');
// $json = json_encode($arr，JSON_UNESCAPED_UNICODE);
// //生成json字符串
// // echo $json;
// // $str = "张三";
// echo $json;

$no = $_POST['no'];
echo $no;

连接数据库

<?php
// $arr = array('1001'=>array('name'=>'张三'),'1002'=>'b','1003'=>'c');
// $json = json_encode($arr，JSON_UNESCAPED_UNICODE);
// //生成json字符串
// // echo $json;
// // $str = "张三";
// echo $json;

$no = $_POST['no'];

$conn = @new mysqli('localhost','root','','myschool');
if ($conn->connect_error) {
    die('连接数据库失败')；
}
$conn -> set_charset('utf8');
$user = $_GET['user'];
$no = htmlspecialchars(addslashes($no));

$sql = "select * from student1 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'=>'查无此人'));
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
</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对象
                //  $('#txt').val(obj.sex);
                // console.log(data);
                if(obj.errcode==0){
                    var student = obj.data;
                    alert('找到了,'+student.name)
                }else{
                    alert(obj.msg);
                }
             })
         })
     })
     </script>
</body>
</html>