jQuery form插件的使用之处理server返回的JSON, XML,HTML数据


Posted in Javascript onJanuary 26, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery form插件的使用--处理server返回的JSON, XML,HTML数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"> 
// json
$(document).ready(function() { 
$('#myForm').ajaxForm({ 
// 声明 服务器返回数据的类型.
dataType: 'json', 
success: processJson 
}); 
});
function processJson(data) { 
// 'data'是一个json对象,从服务器返回的.
$('#jsonOut').html(data.name + " "+data.address + " "+data.comment); 
}
// xml 
$(document).ready(function() { 
$('#xmlForm').ajaxForm({ 
// 声明 服务器返回数据的类型.
dataType: 'xml', 
success: processXml 
}); 
}); 
function processXml(responseXML) { 
// 'responseXML' 是一个XML的文档 ,从服务器返回的.
var name = $('name', responseXML).text(); 
var address = $('address', responseXML).text(); 
var comment = $('comment', responseXML).text(); 
$('#xmlOut').html(name + " "+address + " "+comment); 
}
// html 
$(document).ready(function() { 
$('#htmlForm').ajaxForm({ 
// 用服务器返回的数据 更新 id为 htmlcssrain 的内容.
target: '#htmlOut', 
success: function() { 
$('#htmlOut').fadeIn('slow'); 
} 
}); 
});
</script> 
</head>
<body>
<h3> Demo 8 : jQuery form插件的使用--处理server返回的JSON, XML,HTML数据</h3>
<!-- demo1 json-->
<h4>json方式返回</h4>
<form id="myForm" action="json.jsp" method="post"> 
名称: <input type="text" name="name" id="name" /> <br/>
地址: <input type="text" name="address" id="address"/><br/> 
自我介绍: <textarea name="comment" id="comment" ></textarea> <br/>
<input type="submit" id="test" value="json方式返回" /> <br/>
<div id="jsonOut" ></div>
</form>
<!-- demo2 xml-->
<h4>xml方式返回</h4>
<form id="xmlForm" action="xml.jsp" method="post"> 
名称: <input type="text" name="xmlname" id="xmlname" /> <br/>
地址: <input type="text" name="xmladdress" id="xmladdress"/><br/> 
自我介绍: <textarea name="xmlcomment" id="xmlcomment" ></textarea> <br/>
<input type="submit" id="xmltest" value="xml方式返回" /> <br/>
<div id="xmlOut" ></div>
</form>
<!-- demo3 html-->
<h4>html方式返回</h4>
<form id="htmlForm" action="html.jsp" method="post"> 
名称: <input type="text" name="htmlname" id="htmlname" /> <br/>
地址: <input type="text" name="htmladdress" id="htmladdress"/><br/> 
自我介绍: <textarea name="htmlcomment" id="htmlcomment" ></textarea> <br/>
<input type="submit" id="htmltest" value="html方式返回" /> <br/>
<div id="htmlOut" ></div>
</form>
</body>
</html>

新建json.jsp文件:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防止乱码!
String name = request.getParameter("name");
String address = request.getParameter("address");
String comment = request.getParameter("comment");
System.out.println(name + " - " +address + " - " +comment);
out.println( "{ name : '" +name+ "' , address : '"+address+ "' ,comment : '"+comment+ "' }" );
%>

新建xml.jsp文件:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防止乱码!
String name = request.getParameter("xmlname");
String address = request.getParameter("xmladdress");
String comment = request.getParameter("xmlcomment");
System.out.println(name + " - " +address + " - " +comment);
response.setContentType("text/xml");//注意,由于你是以xml形式传递过来的,所以这里必须写。
out.print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.print("<root>");
out.print("<name>"+name+"</name>");
out.print("<address>"+address+"</address>");
out.print("<comment>"+comment+"</comment>");
out.print("</root>");
%>

新建一个html.jsp文件:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防止乱码!
String name = request.getParameter("htmlname");
String address = request.getParameter("htmladdress");
String comment = request.getParameter("htmlcomment");
System.out.println(name + " - " +address + " - " +comment);
out.println( "<div style='background-color:#ffa; padding:20px'>"+name+" "+address+" "+comment+"</div>" );
%>

以上所述是小编给大家分享的jQuery form插件的使用之处理server返回的JSON, XML,HTML数据,希望对大家有所帮助。

Javascript 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 #Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 #Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 #Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 #Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 #Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 #Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 #Javascript
You might like
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python深度优先算法生成迷宫
2018/01/22 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python 安装impala包步骤
2020/03/28 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
注塑工厂厂长岗位职责
2013/12/02 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
大学生活动策划方案
2014/02/10 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
新年爱情寄语
2014/04/08 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
签约仪式致辞
2015/07/30 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android