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

前端技术 2023/09/05 JavaScript

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

<!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数据，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/13360

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案