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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php实现加减法验证码代码
2014/02/14 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
Python深入学习之装饰器
2014/08/31 Python
Python的requests网络编程包使用教程
2016/07/11 Python
python daemon守护进程实现
2016/08/27 Python
python下10个简单实例代码
2017/11/15 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Python实现微信表情包炸群功能
2021/01/28 Python
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
心理健康教育心得体会
2013/12/29 职场文书
本科毕业生求职信
2014/06/15 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
暂住证证明
2015/06/19 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python
手写实现JS中的new
2021/11/07 Javascript