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去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
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
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python中subprocess批量执行linux命令
2018/04/27 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
django框架创建应用操作示例
2019/09/26 Python
python字符串的拼接方法总结
2019/11/18 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
同学聚会欢迎辞
2014/01/14 职场文书
2014年会策划方案
2014/05/11 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
投资入股合作协议书
2014/10/28 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书