第六章.php与web页面交互
<div>php与web页面交互<span class="Apple-tab-span" style="white-space:pre"> </span></div><div><br></div><div>这一章，主要是说表单，表单是web编程中不可缺少的重要元素，一般作为收集用户提交的数据，表单程序的运作原理是，在客户端通过表单提交数据，将数据提交给web服务器的脚本程序，在脚本程序中完成对数据的处理。</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>创建表单</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>获取表单提交的数据</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>获取超链接传递的数据</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>了解javascript脚本</div><div><br></div><div><br></div><div> 一、web表单的功能是让浏览者和网站有一个互动的平台，主要用来在网页中发送数据到服务器。</div><div><br></div><div> 创建表单，表单使用<form></form>标签来创建并定义表单的开始和结束位置，中间包含多个元素，表单结构,</div><div><br></div><div> 表单由表单元素组成，常用的表单元素有以下几种标记：输入域标记<input>,选择域标记<select>和<option>,文本域标记<textarea>等</div><div> </div><div> 1.输入域标记<input>是表单中最常用的标记之一，常用的文本域，按钮，单选按钮，复选框等构成完整表单。</div><div> 2.选择域标记<select><option> 可以建立一个列表或者菜单</div><div> 3.文本域标记 用来制作多行的文本域，可以在其中输入更多的文本</div><div><br></div><div> 定义表单的数据提交方法： 表单数据的提交方法有两种，即post和get方法，设置表单提交数据的方法非常简单，只需设置<form>表单中的method属性值即可。</div><div> </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>post方法不依赖于URL，不会将传递的参数值显示在地址栏中。另外post方法可以没有限制地传递数据到服务器，所有提交的信息在后台传输，用户在浏览器端是看不到这一过程的，安全性高，所以适合用于发送一个保密或者大量的数据到服务器。</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>get方法提交的表单数据被附加到URL上，并作为url的一部分发送到服务器端，在程序的开发过程中，由于get方法提交的数据是附加到URL上发送的，因此，在URL的地址栏中将会显示“url+用户传递的参数”，若要使用get方法发送表单，url长度应限制在1MB字符内，如果发送的数据量太大，数据将被截断，从而导致意外或失败的处理结果。</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>例 http://url?name1=value1&name2=value2... url为响应地址，name1为表单元素名称，value1为表单元素的值. url和表单元素之间用？隔开，而多表单元素之间用&隔开，每个表单元素格式都是name=value</div><div><br></div><div> </div><div> 2.获取表单提交的数据</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$_GET['name']</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$_POST['name']</div><div> 这两个全局变量可以获取表单的值，但要注意的是，获取表单元素名字是区分大小写的。form标签中所有表单元素都具备name属性，即为表单元素的名称，在使用时需要使用name属性来获取相应的value属性值。所以添加的所有控件必须定义其name属性值。</div><div><br></div><div> 3.获取超链接传递的数据</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>通过程超链接传递数据在程序开发中较为常用，它可以代替按钮来实现某种功能。定义超链接传递数据，接收超链接传递的数据，以及对超链接传递的数据进行编码和解码。</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>1.通过超链接接收传递数据，定义超链接使用<a>标记，语法：<a href=URL name=name target=target>链接文字</a></div><div><span class="Apple-tab-span" style="white-space:pre"> </span> href属性：指定所链接文件的URL路径，这个路径可以是相对路径，也可以是绝对路径</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> name属性：指定页面的锚点名称，如果需要链接到对应的锚点位置，需要在锚点名称前添加一个#字符</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> target属性：指定要打开的链接所使用的浏览器窗口名称，可以使用自定义的窗口名称，也可以使用其它四个，_self,_blank,_parent,_top</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>2.通过$_GET[] 获取超链接传递的数据</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>3.对超链接传递的数据进行编码，解码</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>url编码是一种浏览器用来打包表单输入数据的格式，是对用地址栏传递参数进行的一种编码规则，例如，在参数中带空格，会出错，而用url编码过以后，空格转换成%20,这样就不会报错了，对中文进行编码也是同样的情况，最主要的一点就是它可以对url传递的参数进行编码。</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>php中对字符串进行url编码使用urlencode()函数，语法：urlencode(str) 这样就实现将字符串str进行url编码</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>解码，urldecode(str) 这样就可对应用$_GET[]方法获取的字符串进行解码</div><div><br></div><div><br></div><div> 二、JavaScript脚本</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>javascript脚本语言与其它语言一样，有其自身的基本数据类型，表达式和运算符以及程序的基本构架结构。</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>1.javascript能做什么，它是一种比较流行的制作网页特效的脚本语言，它由客户端浏览器解释执行，</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>2.javascript数据类型，字符串，数值，布尔，对象，null值(可以通过给一个变量赋null来清除变量的内容),undefined(表示该变量尚未被赋值)</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>3.javascript变量， 变量是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器，对于变量的使用首先必须明确变量的命名规则，变量的声明与赋值。</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> 1.命名规则，</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>1.必须以字母或下划线开头，中间可以是数字，字母或下划线，</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>2.变量名不能包含空格或加号，减号等符号</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>3.javascript的变量名是严格区分大小写的，</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>4、不能使用javascript中的关键字</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> 2.变量的声明与赋值</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>在javascript中，一般在使用变量前需要先声明变量，不过有时变量可以不先声明，使用时在根据变量的实际作用来确定其所属的数据类型，所有的javascript变量都由关键字var声明。语法格式：var variable, 在声明变量的同时也可以对变量进行赋值：var variable=9;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>建议：在使用变量前就对其声明，因为声明变量的最大好处就是能及时发现代码中的错误，由于javascript是采用动太编译的，而动态编译不易于发现代码中的错误，特别是变量命名方面的错误。</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>声明变量时所遵守的规则如下：</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>可以使用一个关键字var同时声明多个变量，如： var m,n;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>可以在声明变量的同时对其赋值，即为初始化，如： var m=1;n=100;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>如果只是声明了变量，并未对其赋值，则默认值为undefined</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>在javascript中，可以使用分号代表一个语句的结束，如果每个语句都在不同的行中，那么分号可以省略，如果在同一行，分号就不能省略</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>4.javascript注释</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>两种方法：单行注释:// ,多行注释：/*...*/</div><div> <span class="Apple-tab-span" style="white-space:pre"> </span>另外javascript还能识别html注释的开始部分<!__，会把它看作是单行注释结束，像使用//一样，但是它不能识别html注释的-->部分</div><div> <span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>5.通过javascript脚本自定义函数，用户使用自定义函数必须事先声明，不能直接使用未声明的自定义函数，</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>function 函数名(参数){</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>return var;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>同一个页面中不能定义相同名称的函数，另外，当用户自定义函数后，需要对该函数进行引用，否则自定义函数将失去意义。</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>6、javascript脚本嵌入方式， </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>1.嵌入到html文件中</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>javascript作为一种脚本语言，可以嵌入到html文件中，在html中嵌入javascript的方法是使用<script language="javascript"> ... </script> 其中通过language属性可以设置脚本语言名称和版本。</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>javascript脚本通常定在<head>..<head>标记和<body>...<body>标记之间，写在<head>标记中间的一般是函数和事件处理函数，写在<body>标记中间的是网页内容或调用函数的程序块。</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>在html中可以通过javascript: 可以调用javascript的方法，</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>2.应用javascript事件调用自定义函数</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>3.在php动态网页中引用js文件</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>在网页中除了<script>..</script>标记之间编写javascript脚本代码外，还可以通过<script>标记中的src属性指定外部的javascript文件（即js文件，以.js为扩展名）的路径，从而引用对应的js文件。 src属性不但可以调用同一个服务器上的js文件，还可以通过指定路径来调用其它服务器上的js文件。</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>注意事项：1.在js文件中，只能包含javascript脚本代码，不能包含<script>标记和html代码</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> 2.在引用js文件的<script>与</script>标记之间不应存在其他javascript代码，即使存在，浏览器也会忽略此脚本代码，只执行js文件中的代码。</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>4.解决浏览器不支持javascript问题</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>1.开启ie浏览器对javascript的支持</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>2.开启ie浏览器对本地javascript的支持</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>3.应用注释符号验证浏览器是否支持javascript脚本功能</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>4，应用<noscript>标记验证浏览器是否支持javascript脚本，如果支持则忽略<script>..</noscript>之间的内容。</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>7.javaScript常用事件</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>参考书籍</div><div><br></div><div><br></div><div>复习：</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>1、创建表单</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>2、添加表单元素</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>3、表单提交方法</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>4、获取表单提交的数据</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>5，获取超链接传递的数据</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>6、获取超链接传递的数据</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>7、对超链接传递的数据进行编码，解码</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>8、javascript是什么</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>9、javascript类型，变量，自定义函数</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>10、javascript脚本嵌入方式，</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>11、应用javascript事件调用自定义函数</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>12、在php动态网页中引用js文件</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>13、解决浏览器不支持javascript问题</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><br></div>
页:
[1]