AJAX简介：
AJAX(Asynchronous JavaScript and XML):异步的JavaScript和XML
AJAX不是新的编程语言，而是一种使用现有标准的新方法
AJAX最大的优点是，在不加载整个页面的情况下，实现与服务器交换数据，并更新网页的局部内容
我们都知道submit的Form表单的提交方式，但是这种提交方式的缺点也是很大的，因为它提交时，刷新整个网页。所以我们就有了AJAX。
timg.jpeg
XHR创建对象：
XMLHttpRequest对象用于在后台与服务器交换数据
创建XMLHttpRequest对象
var xmlhttp = new XMLHttpReques();
XMLHttpRequest对象的方法和属性：
方法：
- open("数据的提交方式","数据提交的地址","同步或者异步");
- send("要提交的数据");
属性： - readyStatus：0-初始状态 1-创建连接 2-向服务端发送数据 3-服务端返回数据 4-数据接收完毕
- responseText("服务器返回的数据");
事件： - onreadystatechange：当xhr状态发生变化的时候会执行
- onload：数据接收完毕后执行
模拟表单提交：FormData
var formdata = new FormData();
方法：append("传给后台的参数名","参数值")；第二个值如果是文件的话 需要传的是ele.files[0];
比如做个订菜单的模拟前后台的数据交互：
大概的流程是：后台从数据库里面拿到所有的菜单，然后传到前台，前台接收数据之后，把json传转换为数组，遍历，动态生成相对应的菜单页面，当用户选择菜品输入份数，点击提交之后，前台向后台发送用户的选择菜品的数据，后台拿到数据以后，经过处理，返回给前台。
效果的实现
前台的代码：
<form method="post" style="width: 320px;margin:100px auto;">
<div style="text-align: center; font-size: 30px; margin-bottom:20px;">丽德快餐厅</div>
<div id="show"></div>
<input type="button" value="立即订餐" id="btn">
</form>
<script>
var form = document.getElementsByTagName("form")[0];
var btn = document.getElementById("btn");
var div1=document.getElementById('show');
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append("action","getmenu");
xhr.open("post","menudata.php",true);
xhr.send(formData);
xhr.onload = function(){
var jsonstr = JSON.parse(this.responseText);
for(i in jsonstr){
var div = document.createElement('div');
div.className = "menu";
div.innerHTML = ""+jsonstr[i][0]+"<input type='checkbox' name='key[]' value="+i+"/> "+jsonstr[i][1]+"元 订餐份数 <input type='text' name='amount_"+jsonstr[i][2]+"'/>"
form.insertBefore(div,btn);
}
}
btn.onclick = function(){
var menuList = document.getElementsByClassName('menu');
// console.log(menuList);
//选中的checkbox传到后台
var keyarr =[];
// var namearr = [];
var countarr = [];
for(var i=0;i<menuList.length;i++){
if(menuList[i].children[0].checked==true){
keyarr.push(i);
// namearr.push(menuList[i].childNodes[0].data);
countarr.push(menuList[i].children[1].value);
}
}
// console.log(keyarr,countarr);
//得到被选中的checkbox 形式是0,1
var keystr = keyarr.join(",");
// var namestr = namearr.join(",");
var countstr = countarr.join(",");
// console.log(keystr,namestr,countstr);
var xhr1 = new XMLHttpRequest();
var formData1 = new FormData();
formData1.append("check","list");
formData1.append("key",keystr);
// formData1.append("name",namestr);
formData1.append("count",countstr);
xhr1.open("post","menudata.php",true);
xhr1.send(formData1);
xhr1.onload = function(){
var totalPrice=0;
var jsonstr1 = JSON.parse(this.responseText);
div1.innerHTML = "您选择的是：<br/>";
for(i in jsonstr1){
div1.innerHTML += jsonstr1[i].name+jsonstr1[i].amount+"份 价格为："+jsonstr1[i].price+"元<br>";
totalPrice+=jsonstr1[i].price;
}
div1.innerHTML+="总价为:"+totalPrice+"元";
// console.log(jsonstr1);
}
}
</script>
后台的代码：
<?php
$fp = fopen("menu.txt","r");
while(!feof($fp)){
$line = fgets($fp);
$array = explode(" ",$line);
if(!empty($array[0])){
$menu[] = $array;
}
}
//如果用户提交了数据
if(!empty($_POST)) {
if(!empty($_POST['action'])&&$_POST['action']=="getmenu"){
echo json_encode($menu);
exit;
}
if($_POST['check']=="list"){
$userSelected = array();
$totalPrice = 0;
// $name = explode(",",$_POST['name']);
$keys = explode(",",$_POST['key']);
$count = explode(",",$_POST['count']);
foreach($keys as $key=>$val){
//菜名
$userSelected[$key]['name'] = $menu[$val][0];
//份数
$userSelected[$key]['amount'] = $count[$key];
//价格=单价*份数
$userSelected[$key]['price'] = $menu[$val][1] * $count[$key];
//总价格
$totalPrice += $userSelected[$key]['price'];
}
recordMenu($userSelected);
echo json_encode($userSelected);
exit;
}
}
function recordMenu($userSelected){
$line="";
foreach($userSelected as $key => $val) {
$line .= "|".$val['name'].",".$val['amount'].",".$val['price']."|";
}
$line .="\n";
$fp = fopen("record.txt", "a+");
fwrite($fp, $line);
fclose($fp);
}
?>
网友评论