-1- 《Web程序
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
》实验指导书 实验十 Ajax应用 一、实验目的(1)掌握jQuery使用Ajax； (2)了解前端框架开发Ajax 二、实验要求(1)仔细阅读实验指导书，完成各个实验； (2)作业上传格式：
实验报告
化学实验报告单总流体力学实验报告观察种子结构实验报告观察种子结构实验报告单观察种子的结构实验报告单
文件命名"实验十_学号_姓名.doc", 请严格按照此命名规则，如"实验十_201521314201_张三.doc"，不需压缩； 三、实验内容【实验1】JSON要求：(1)省份下拉框可以预先设置，当用户选择其中一个省份时，激发事件，通过Ajax获得"城市下拉框列表"、"总面积"（省份）以及"总人口"（省份）的数据，要求返回格式采用JSON方式； 生成的格式可参考 {"area":17.98, "population":10430, "cities":["广州","深圳","珠海","汕头"]} (2)PHP中的数据源可以是数据库、文件或者是预设的数组。(只需要设置4个省份，每个省份4个城市即可，设置每个省份的总面积与总人口) 提示：(1)可采用jQuery的Ajax方法调用 $.ajax({url:'exp10_2.php', type:"POST", data:{province: "省份ID"}, -2- dataType:"json", success:ShowProvince //ShowProvince是回调函数 }); function ShowProvince(dataObj) { 通过dataObj.area获取总面积、dataObj.population获取总人口、dataObj.cities获取城市列表，以上字段定义需要与PHP中返回的JSON一致。 } (2)PHP中通过$_POST获取提交的省份ID，对应查找相应的城市列表、总面积与总人口 $data = array(); $data["area"] = "面积数据"; $data["population"] = "人口数据"; $data["cities"] = [城市列表，用一数组组织]; echo json_encode($data) (3)生成城市下拉框<option>选项，可参考JavaScript第五章
课件
超市陈列培训课件免费下载搭石ppt课件免费下载公安保密教育课件下载病媒生物防治课件 可下载高中数学必修四课件打包下载
，或者采用jQuery方法： $("<option></option>").appendTo($("列表id")).html(dataObj.cities[i]); 【实验2】jQueryUI/jQueryEasyUI根据课件，在网页中构造2个UI，并且具有一个特效控制。 可以在http://jqueryui.com/demos/中翻看适当的控件， 或者在http://www.jeasyui.com 中找到类似的空间，尝试采用百度静态资源公共库(CDN)来引入JS。 【实验3】表单提交与表格的动态创建（选做）用Ajax完成表单异步提交，由Ajax提交整个表单数据，然后PHP返回JSON数据，在A -3- jax的回调函数中在网页下方进行表格数据创建。该PHP建议采用PDO的方式进行。只需完成下图中的“显示全部题目”超链接的事件功能。 建议JSON的返回格式为 {ret:返回码, //0表示成功，其他则是错误, msg:错误消息, data:返回数组 //如果ret=0，则返回数组，数组每个元素表示一行数据
记录
混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载
} -4- 要注意当PHP遇到语法错误或其他程序未捕捉的异常，将会输出浏览器一些出错信息，一般，所以一般要做try‐catch处理，如果通过调试后则在PHP输出error_reporting(0)抑制所有错误输出。 选做：基础好的同学，采用Angular.js或Vue.js来完成. 提示：(1)可采用jQuery的Ajax方法调用 $(function(){ $('#button').click(function(){ $.ajax({url:'exp10_4.php', type:"POST", data:$('#myForm').serialize(), dataType:"json", success:ShowData,//由ShowData生成动态表格 error:function(){alert('error');} }); }); }); function ShowStudents(data) var table = $("#myTable");//获得 $("#myTable tr:not(:first)").remove();//去掉表格其他行，除第一行标题行 if (data.ret == 0){ data = data.data;//取出数组元素 for (var row of data) { var tr = $("<tr></tr>").appendTo(table); $("<td></td>").appendTo(tr).html(row.sno);//显示学号
单元
初级会计实务单元训练题天津单元检测卷六年级下册数学单元教学设计框架单元教学设计的基本步骤主题单元教学设计
格 ......其他略 (2)后台PHP部分可以沿用实验6的学生论文题目的插入与修改 其中当遇到数据检验出错是需要统一返回JSON格式，如，下面判断学号是否是12位 if (strlen($sno) != 12 || is_numeric($sno) == false)//简单学号是否是12 { $err = array('ret'=>‐2 , 'msg' =>'学号不完整');//构造完整的JSON字符 die(json_encode($err)); -5- } 又如，当插入时出现错误，则 $rows = $obj‐>GetAffectedRows(); if (!$result || !$rows) { //说明不能成功插入数据，就返回错误的JSON格式 die(json_encode(['ret'=>‐4, 'msg'=>'Failure, data can not been updated or password is not valid!'])); } else { //数据可以更新，就构建正确的JSON格式 $data = ['ret'=>0, 'msg'=>'Success! Data is successfully updated']; $data['data'] = getAllStudents();//调用getAllStudents，获得全部列表数据 die(json_encode($data)); } 其中 getAllStudents()参考课件的PDO做法，基础好的同学可以对PDO做一个对象封装。
浙公网安备 33021202002483