CH12 jQuery AJAX优质教学课件.ppt

12.5.2准备工作3. 接口制作本示例选用了php技术来制作接口文件，并自定义文件名为search.php，同样需要UTF-8编码格式。接口文件search.php的内容如下：1. ?php2. //读取小程序端请求的单词3. $word=$_GET[word];4. 5. //读取json文件6. $json_data=file_get_contents(data.json);7. //把json字符串强制转为PHP数组8. $dict_data=json_decode($json_data,true);9. //查询结果$result[status_code]=0;//0表示未查到，1表示查到了$result[meaning_CN]=;$result[meaning_EN]=;//遍历查单词foreach($dict_dataas$obj){ //如果查到了 if($obj[word]==$word){ //更新查询结果 $result[status_code]=1; $result[meaning_CN]=$obj[meaning_CN]; $result[meaning_EN]=$obj[meaning_EN]; //停止遍历 break; }}//返回解释(转成json格式传输)echojson_encode($result);?上述内容表示根据请求参数word的取值查找data.json词库文件，并把相同单词word的单词释义返回给客户端。12.5.2准备工作3. 接口制作此时接口文件就制作完成了，请把search.php放在服务器端的WWW/dict/api目录下等待使用。开发者也可以先使用浏览器自测接口是否有效，在浏览器地址栏输入：浏览器运行结果如下：http://localhost/dict/api/search.php?word=apple或者/dict/api/search.php?word=apple如果可以看到其中的“status_code”取值为1，就说明查到了对应的题目数据。12.5.3界面设计本案例主要分成表单和查询结果两个区域，其中表单内部包含单行文本输入框、提交按钮和重置按钮。结构如图所示。12.5.3界面设计创建一个HTML文件，文件名可自定义，例如Dictionary.html。在HTML5中使用divclass=container元素声明查单词整体区域，在其中嵌套表单formid=form01和段落元素pid=result分别表示表单和查询结果区域，相关代码如下：1. body2. !--标题--3. h3简易单词查询程序/h34. !--水平线--5. hr6. !--查单词区域--7. divclass=container8. !--1表单--9. formid=form01/form10. !--2查询结果--11. pid=result/p12. /div13. /body12.5.3界面设计继续补充表单中的内容，代码片段如下：其中单行文本输入框input的placeholder属性是用于在未输入内容时显示的提示。1. !--1表单--2. formid=form013. !--1-1单行文本输入框--4. inputid=wordtype=textplaceholder=请输入您要查询的单词/5. !--1-2提交按钮--6. inputtype=submitvalue=提交/7. !--1-3重置按钮--8. inputtype=resetvalue=重置/9. /form12.5.3界面设计本示例使用CSS外部样式表规定页面样式。在css文件夹中创建dict.css文件，并在HTML5文件的head首尾标签中声明对CSS文件的引用。相关HTML5代码片段如下：在CSS外部样式表中设置公共样式，相关CSS代码如下：1. head2. metacharset=utf-83. title简易单词查询程序/title4. linkrel=stylesheethref=css/dict.css5. /head1. /*公共样式*/2. *{3. box-sizing:border-box;/*盒子尺寸包含了边框和内边距*