cari

Rumah >hujung hadapan web >tutorial js >Penggunaan pemalam borang jQuery untuk memproses data JSON, XML, HTML yang dikembalikan oleh server_jquery

Penggunaan pemalam borang jQuery untuk memproses data JSON, XML, HTML yang dikembalikan oleh server_jquery

WBOY
WBOYasal
2016-05-16 15:17:511539semak imbas

Tanpa berlengah lagi, saya hanya akan menghantar kod untuk anda Kod khusus adalah seperti berikut: 

<!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>

Buat fail json.jsp baharu: 

<%@ 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+ "' }" );
%>

Fail xml.jsp baharu: 

<%@ 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("<&#63;xml version=\"1.0\" encoding=\"UTF-8\"&#63;>");
out.print("<root>");
out.print("<name>"+name+"</name>");
out.print("<address>"+address+"</address>");
out.print("<comment>"+comment+"</comment>");
out.print("</root>");
%>

Buat fail html.jsp baharu: 

<%@ 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>" );
%>

Di atas ialah penggunaan pemalam borang jQuery yang dikongsi oleh editor dengan anda untuk memproses data JSON, XML dan HTML yang dikembalikan oleh pelayan saya harap ia akan membantu semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kesan animasi super hebat direalisasikan oleh enjin permainan HTML5 LTweenLite (dengan muat turun kod sumber demo)_kemahiran javascriptArtikel seterusnya：Kesan animasi super hebat direalisasikan oleh enjin permainan HTML5 LTweenLite (dengan muat turun kod sumber demo)_kemahiran javascript

Artikel berkaitan

Lihat lagi