模拟数据交互系列之五--各种请求与响应

Contents

1. 各种请求和响应

各种请求和响应

a标签

a标签的数据一般是用GET方式的请求，，然后在herf中填入的是请求的地址，最后用get方式来发送数据

block

1	<a href="01demo.php?username=zhangsan&age=12">get 方式提交</a>

form类的

form 的发送，一般使用这个post
然后在这个里头增加input的标签在input中的name=”username” 就是这个变量的名字。
用户写入input的内容就是username的内容。

在php中获取。
$username = $_GET[“username”];
$username = $_POST[“username”];
echo $username ;
这样点击提交跳转到php的这个页面输出username 的值

注意

一定会有一个input标签type的值为submit用来提交

我要把这个临时的文件放在我的自己的目录下面.
 我可以调用php给我提供的另外一个函数.
<form action="01demo.php" method="post" enctype="multipart/form-data">
    <input type="file" name="lifephoto"/> <br />
    <input type="submit" value="文件上传"/>
</form>
（记住这个图片的名字必须是中文的不然就出错了）
 /*
     1:我要移动的文件的目录.
     C:\wamp\tmp\php6C62.tmp
     2:我要移动到那个文件夹里面的那个文件里面去
     images/2.txt
 */
 //获取文件临时存储位置.
 $tmp_name=$_FILES['lifephoto']['tmp_name'];
 //获取文件名称 images/1.png
 $fileName=$_FILES['lifephoto']['name'];
 //把文件移动到另外的一个指定的目录的文件当中
 move_uploaded_file($tmp_name,"images/".$fileName);
*变量要一一对应*

php 的动态输出

简单的来说这就是一个html页面中间要把自己的php部分用php语言的格式然后利用echo，在这个页面输出。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>订单页面</title>
</head>
<body>
<table>
    <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>描述</td>
    </tr>
    <?php
            //我在这里从数据库里面取出来数据
            //取出来的数据肯定放在一个临时的存储区。
            //从数据库里面的数据取出来放在一个数据当中，
            //我把这个数据里面的数据遍历出来，再进行输出.
            $array=array(
                  array("name"=>"chen","sex"=>"男","detail"=>"有点帅"),
                  array("name"=>"li","sex"=>"女","detail"=>"很帅"),
                  array("name"=>"wang","sex"=>"男","detail"=>"超帅"),
            );
            for($i=0;$i<count($array);$i++){
                    echo "<tr>";
                    foreach($array[$i] as $key=>$val){
                            echo "<td>";
                            echo $val;
                            echo "</td>";
                    }
                    echo "</tr>";
            }
    ?>
</table>
</body>
</html>

说明：

中间的那一部分就是php的内容就可以向页面输出信息

xml格式,json格式数据（都是ajax请求ajax单独讲）

什么是xml格式的数据？类似标签

<?xml version="1.0"  encoding="utf-8"?>
<users>
    <user>
        <username>张三</username>
        <sex>女</sex>
        <desc>美女</desc>
        <imageURL>images/1.jpg</imageURL>
    </user>
    <user>
        <username>李四</username>
        <sex>女</sex>
        <desc>有韵味</desc>
        <imageURL>images/2.jpg</imageURL>
    </user>
    <user>
        <username>王五</username>
        <sex>男</sex>
        <desc>大美女</desc>
        <imageURL>images/3.jpg</imageURL>
    </user>
    <user>
        <username>xxx</username>
        <sex>男</sex>
        <desc>大美女</desc>
        <imageURL>images/3.jpg</imageURL>
    </user>
</users>

后缀名字为xml
什么是json格式的数据 key:value键值对
文本的后缀是txt

{"rows":[
    {"username":"冰","age":21,"sex":"女","desc":"云南来的汉族妹子"},
    {"username":"石健","age":23,"sex":"男","desc":"帅哥一枚"},
    {"username":"王春淼","age":22,"sex":"女","desc":"命里缺水"},
   {"username":"齐飞龙","age":22,"sex":"男","desc":"就是一条龙"}
],"total":20}

服务端对xml,json的解析然后给客户端

对xml解析：

1
2
3

header("Content-Type:text/xml;charst=utf-8");
$data=file_get_contents("02demo.xml");
echo $data;

对json的解析：

1
2
3

header("Content-Type:text/html;charset=utf-8");
$data=file_get_contents("01json.txt");
echo $data;

客户端对这种格式数据的处理

1.对上面的xml格式的处理

var data=xhr.responseXML;（关键方法，下面要知道怎么用获取到的数据）
//我要把这些数据解析，通过dom 解析
//解析组装成标签，放在我页面对应的位置.
var users=data.getElementsByTagName("user");
for(var i=0;i<users.length;i++){
 var tr=document.createElement("tr");
 //创建四个td
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 var td3=document.createElement("td");
 var td4=document.createElement("td");
 //给每个td 给赋值。
td1.innerHTML=users[i].getElementsByTagName("username")[0].innerHTML;
td2.innerHTML=users[i].getElementsByTagName("sex")[0].innerHTML;
td3.innerHTML=users[i].getElementsByTagName("desc")[0].innerHTML;
 //找个里面目前放置的是一个图片的地址.
  var img=document.createElement("img");
    img.setAttribute("src",users[i].getElementsByTagName("im     ageURL")[0].innerHTML);
    td4.appendChild(img);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);                                         tr.appendChild(td4);   
    document.querySelector("table").appendChild(tr);
}

对于json的处理(注意获取和使用的方法)

JSON.parse()、JSON.stringify()括号中就是数据，，这个函数会将数据转化为JSON格式的
JSON兼容处理json2.js

//调用这句出问题. 符合json 格式的字符串，才能被转换
var data1=JSON.parse(data);
//alert(data1);
alert(data1.username);
alert(data1.age);
//第二种转换方式
js 给我们提供了一个方法 这个方法叫做
eval()  //把json 格式字符串传进去
{"username":"zhangsan","age":11}
eval 函数有要求,要求传进去的json 格式字符串必须使用()
//({"username":"zhangsan","age":11})
var obj=eval("("+data+")");
alert(obj.username);
alert(obj.age);

客户端利用模板引擎来对数据进行解析（是对json格式的数据）

以上面的json格式的数据为例子

肯定需要导入js/template-native.js
创建一个模板（不知道模板怎么去创建，，模板里面的内容怎么去写.）

chenzq FE

try to be a better man!