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 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
深入浅析react native es6语法
Dec 09 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 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,不用COM,生成excel文件
2006/10/09 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
Node.js 基础教程之全局对象
2017/08/06 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
pytorch中的inference使用实例
2020/02/20 Python
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
公务员政审材料范文
2014/12/23 职场文书
与死神共舞观后感
2015/06/15 职场文书
中秋节主题班会
2015/08/14 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫