jQuery开发基础第7章Ajax在jQuery中的应用.ppt

本实例实现留言板即时更新功能，具体要求如下： （1）创建留言页面，使用户留言可以异步提交。 （2）将用户提交的留言即时显示出来。 运行本实例，在如图7-22所示页面中输入留言信息，点击“填写留言”按钮，可以看到提交的评论即时显示到了当前页面。 7.6 综合实例——Ajax实现留言板即时更新 图7-22 留言板留言即使更新显示 程序开发步骤如下： （1）创建一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入jQuery库。 script type=text/javascript src=../js/jquery-1.11.1.min.js/script （2）编写CSS样式，用于控制导航菜单的显示样式，具体代码请参见光盘。 （3）在页面的body标记中，首先添加一个form表单，让用户填写用户名、标题以及留言内容。之后创建一个显示用户提交留言的id为ddiv的div元素，代码如下： form action= method=post name=form1 id=form1 tr td width=761 align=center bgcolor=#F9F8EFtable width=749 border=0 align=center cellpadding=0 cellspacing=0 style=BORDER-COLLAPSE: collapse tr td width=749 height=57 background=images/a_03.jpgnbsp;nbsp;/td /tr tr td height=36 colspan=3 align=left background=images/a_05.jpg bgcolor=#F9F8EF scope=colnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;姓nbsp;nbsp;名： input name=username id=username value= maxlength=64 type=text / /td /tr tr td height=36 colspan=3 align=left background=images/a_05.jpg bgcolor=#F9F8EFnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;标　题： input maxlength=64 size=30 name=title type=text/ /td /tr tr td height=126 colspan=3 align=left background=images/a_05.jpg bgcolor=#F9F8EFnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;内nbsp;nbsp;容： textarea name=content cols=60 rows=8 id=content style=background:url(./images/mrbccd.gif)/textarea table width=734 border=0 align=center cellpadding=0 cellspacing=0 tr td width=703 height=40 align=centerinput name=button type=button id=button value=填写留言/ /tr /table /td /tr tr td height=35 background=images/a_07.jpgnbsp;nbsp;/td /tr /table /td /tr /form div class=dhead/div div id=ddiv/div div class=dfoot/div （4）在引入jQuery库的代码下方编写jQuery代码，为按钮增加click事件，使其被点击时通过ajax方式发送请求，待服务器端成功返回内容后，在回调函数中，将用户提交的信