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 相关文章推荐
解析Javascript小括号“()”的多义性
Dec 03 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
python装饰器代码深入讲解
2021/03/01 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
2015年父亲节寄语
2015/03/23 职场文书
培训督导岗位职责
2015/04/10 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
大学开学感言
2015/08/01 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server