web20jquery23 Ajax操作新Word格式文档下载.docx
《web20jquery23 Ajax操作新Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《web20jquery23 Ajax操作新Word格式文档下载.docx（14页珍藏版）》请在冰点文库上搜索。
scripttype="
text/javascript"
//页面加载完成后执行
$（function（）{
//需求：
document.getElementById（"
）.onblur=function（）{
//获取用户输出的用户信息
varusername=this.value;
//alert（username）;
//校验格式是否正确必须是4~12的字母数字下滑线的组合
if（!
username.match（"
^\\w{4,12}$"
））{
//如果校验格式不正确,马上提示用户格式不合法
document.getElementById（"
）.innerHTML="
fontcolor='
red'
用户名必须是4~12位的字母数字下划线的组合!
/font>
"
;
return;
}else{
//如果校验格式正确,去数据库查询该用户名是否存在,在结果span中显示后台返回的信息
//创建核心对象
varxmlhttp;
if（window.XMLHttpRequest）{//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest（）;
}
else{//codeforIE6,IE5
xmlhttp=newActiveXObject（"
Microsoft.XMLHTTP"
）;
xmlhttp.onreadystatechange=function（）{
if（xmlhttp.readyState==4&
&
xmlhttp.status==200）{
document.getElementById（"
）.innerHTML=xmlhttp.responseText;
};
xmlhttp.open（"
POST"
"
${pageContext.request.contextPath}/demo1"
true）;
xmlhttp.setRequestHeader（"
Content-type"
application/x-www-form-urlencoded"
xmlhttp.send（"
username="
+username）;
};
}）;
/script>
/head>
服务端代码：
publicclassDemo1ServletextendsHttpServlet{
publicvoiddoGet（HttpServletRequestrequest,HttpServletResponseresponse）throwsServletException,IOException{
doPost（request,response）;
}
publicvoiddoPost（HttpServletRequestrequest,HttpServletResponseresponse）throwsServletException,IOException{
//需求:
校验用户名是否合法
//模拟数据库的假数据
List<
String>
list=newArrayList<
（）;
list.add（"
admin"
liuyan"
//防止出现中文乱码
request.setCharacterEncoding（"
utf-8"
//获得用户名
Stringusername=request.getParameter（"
response.setContentType（"
text/html;
charset=utf-8"
//校验
if（list.contains（username））{
//查到了用户名返回改用户名已经被占用
response.getWriter（）.println（"
用户名已经存在,换一个!
}else{
//没查到此用户名可以使用
green'
用户名可以使用!
}
}
问题：
如何将responseText的json格式字符串，转换为JS对象。
eval（“（”+responseText+”）”）;
1.2.jqueryAjax的开发
jquery提供了6个编写ajax的方法，分成三组：
第一组：
$.ajax是jquery提供最基本ajax编程方法，功能强大，代码复杂
第二组：
为了简化$.ajax编程，提供了load、$.get、$.post（重点）
第三组:
$.getScript和$.getJSON实现ajax的跨域请求
1.2.1.$.ajax的使用
$.ajax（options）是底层级AJAX函数的语法，功能强大
语法格式：
$.ajax（{
type:
"
POSTGET"
//http请求方式
url:
请求地址"
data:
name=John&
location=Boston"
//发送给服务器的数据
dataType：
””,//预期服务器返回的数据类型。
如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断
jsonp:
callback//解决跨域问题
success:
function（）{...}//成功回调函数
}）;
$.ajax改写用户名离焦校验
$（"
#username"
）.blur（function（）{
//获取用户输出的用户信息
varusername=$（this）.val（）;
alert（username）;
$（"
#username_result"
）.html（"
$.ajax（{
type:
url:
data:
+username,
success:
function（msg）{//msg值得是服务器返回的数据
ajax:
:
+msg）;
}
}）;
}）;
1.2.2.load的使用
Load的语法：
jquery对象.load（url,param,callback）
⏹url访问服务器地址
⏹param发送给服务器参数
⏹callback当正常返回后执行回调函数
如果param存在，以POST方式请求，如果param不存在，以GET方式请求
load改写用户名离焦校验，Ajax校验用户名是否合法
varurl="
$（"
）.load（url,{"
username}）;
1.2.3.$.get和$.post的使用
语法：
$.get（url,param,callback,type）
$.post（url,param,callback,type）
⏹url请求服务器的地址
⏹param发送给服务器参数
⏹callback服务器返回客户端执行success函数，接收data参数（服务器返回数据）
⏹type指定服务器返回数据格式，如果不指定，使用response响应contextType自动识别
案例:
点击链接获取服务器端数据
HTML代码：
ahref="
javascript:
void（0）"
showProducts"
显示商品信息<
/a>
hr/>
divid="
result"
还没有显示数据<
/div>
!
--引入jquery的js-->
src="
${pageContext.request.contextPath}/js/jquery-1.8.3.js"
//给超链接绑定单击事件
$（"
#showProducts"
）.click（function（）{
//向服务器索要数据发送ajax请求以post方式
$.get（"
${pageContext.request.contextPath}/demo2"
function（data）{//data值得是服务器返回的数据
//将返回的数据封装到table中并且显示在页面上
var$table=$（"
tableborder='
1px'
width='
500px'
/table>
$table.append（$（"
tr>
th>
商品名称<
/th>
商品价格<
/tr>
））;
$（data）.each（function（）{
//alert（this.name+"
+this.price）;
//每个商品都是一个tr
var$tr=$（"
td>
+this.name+"
/td>
+this.price+"
//将tr追加到table中
$table.append（$tr）;
//将table放到结果div中
#result"
）.html（$table）;
/html>
将list对象转成json
publicclassFlexJsonTest{
publicstaticvoidmain（String[]args）{
Product>
list.add（newProduct（"
奔驰S600模型"
"
100000"
芭比娃娃"
1000000"
//flexjson插件的核心对象
JSONSerializerserializer=newJSONSerializer（）;
//排除class属性
serializer.exclude（"
*.class"
//将list转成json串
StringjsonStr=serializer.serialize（list）;
System.out.println（jsonStr）;
服务器servlet代码：
publicclassDemo2ServletextendsHttpServlet{
//System.out.println（jsonStr）;
//将json串返回给浏览器设置响应类型
application/json;
//给浏览器返回数据
response.getWriter（）.println（jsonStr）;
1.2.4.serialize和serializeArray方法使用
如何将form的数据以Ajax方式发送到服务器
通过serialize方法，将form参数转换name=value&
name=value格式
html代码：
用户名<
/>
密码<
password"
爱好<
checkbox"
hobby"
tiyu"
体育
dushu"
读书
yinyue"
音乐<
mybtn"
#mybtn"
varparam=$（"
#myform"
）.serialize（）;
alert（param）;
$.post（"
${pageContext.request.contextPath}/demo3"
param）;
用户名<
密码<
爱好<
servlet代码:
publicclassDemo3ServletextendsHttpServlet{
//设置请求编码防止出现中文乱码
//获得参数值
Stringpassword=request.getParameter（"
String[]hobbyArr=request.getParameterValues（"
System.out.println（"
用户名:
密码:
+password）;
爱好:
+Arrays.toString（hobbyArr））;
练习：
1、重点练习Ajax
AJAX用法
Load用法
GET解析JSON案例
POST解析JSON案例
2、DOM练习全选、select移动
3、区分事件绑定和事件委派区别
4、事件默认动作阻止和事件传播阻止
升级会员 