利用jQuery接受和處理xml數(shù)據(jù)的代碼(.net)
更新時間:2011年03月28日 22:11:53 作者:
以下使用jQuery+Servlet接受和處理xml數(shù)據(jù),模擬判斷用戶名是否存在
效果如下:
package com.ljq.test;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
/**
* 利用jQuery接受和處理xml數(shù)據(jù)
*
* @author jiqinlin
*
*/
@SuppressWarnings("serial")
public class AjaxXmlServer extends HttpServlet{
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try{
//修改一----響應的Content-Type必須是text/xml
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
//1.取參數(shù)
String old = request.getParameter("name").trim();
//修改二-----返回的數(shù)據(jù)需要拼裝成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
//2.檢查參數(shù)是否有問題
if(old == null || "".equals(old)){
builder.append("用戶名不能為空").append("</message>");
} else{
//3.校驗操作
String name = old;
if(name.equals("linjiqin")){
builder.append("用戶名[" + name + "]已經(jīng)存在,請使用其他用戶名").append("</message>");
} else{
builder.append("用戶名[" + name + "]尚未存在,可以使用該用戶名注冊").append("</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch(Exception e){
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
修改web.xml
<servlet>
<servlet-name>AjaxXmlServer</servlet-name>
<servlet-class>com.ljq.test.AjaxXmlServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxXmlServer</servlet-name>
<url-pattern>/servlet/ajaxXmlServer</url-pattern>
</servlet-mapping>
請求頁面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://localhost:8083/jqueryprj/js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="http://localhost:8083/jqueryprj/js/verifyjqueryxml.js"></script>
</head>
<body>
<input type="text" id="userName" />
<input type="button" value="校驗" onclick="verify()"/>
<div id="result"></div>
<!--div和span的直觀差異,div中的內(nèi)容獨占行,span中的內(nèi)容和前后其他內(nèi)容相處良好-->
</body>
</html>
js
function verify(){
var userName = $("#userName").val();
$.ajax({
type: "POST", //http請求方式
url: "servlet/ajaxXmlServer", //服務器端url地址
data: "name=" + userName, //發(fā)送給服務器端的數(shù)據(jù)
dataType: "xml", //告訴JQuery返回的數(shù)據(jù)格式
success: callback //定義交互完成,并且服務器正確返回數(shù)據(jù)時調(diào)用的回調(diào)函數(shù)
});
}
//回調(diào)函數(shù)
function callback(data) {
var jqueryObj = $(data);
//獲取message節(jié)點
var message = jqueryObj.children();
//獲取文本內(nèi)容
var text = message.text();
//4.將服務器段返回的數(shù)據(jù)動態(tài)的顯示在頁面上
$("#result").html(text);
}
服務器端
復制代碼 代碼如下:
package com.ljq.test;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
/**
* 利用jQuery接受和處理xml數(shù)據(jù)
*
* @author jiqinlin
*
*/
@SuppressWarnings("serial")
public class AjaxXmlServer extends HttpServlet{
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try{
//修改一----響應的Content-Type必須是text/xml
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
//1.取參數(shù)
String old = request.getParameter("name").trim();
//修改二-----返回的數(shù)據(jù)需要拼裝成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
//2.檢查參數(shù)是否有問題
if(old == null || "".equals(old)){
builder.append("用戶名不能為空").append("</message>");
} else{
//3.校驗操作
String name = old;
if(name.equals("linjiqin")){
builder.append("用戶名[" + name + "]已經(jīng)存在,請使用其他用戶名").append("</message>");
} else{
builder.append("用戶名[" + name + "]尚未存在,可以使用該用戶名注冊").append("</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch(Exception e){
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
修改web.xml
復制代碼 代碼如下:
<servlet>
<servlet-name>AjaxXmlServer</servlet-name>
<servlet-class>com.ljq.test.AjaxXmlServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxXmlServer</servlet-name>
<url-pattern>/servlet/ajaxXmlServer</url-pattern>
</servlet-mapping>
請求頁面
復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://localhost:8083/jqueryprj/js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="http://localhost:8083/jqueryprj/js/verifyjqueryxml.js"></script>
</head>
<body>
<input type="text" id="userName" />
<input type="button" value="校驗" onclick="verify()"/>
<div id="result"></div>
<!--div和span的直觀差異,div中的內(nèi)容獨占行,span中的內(nèi)容和前后其他內(nèi)容相處良好-->
</body>
</html>
js
復制代碼 代碼如下:
function verify(){
var userName = $("#userName").val();
$.ajax({
type: "POST", //http請求方式
url: "servlet/ajaxXmlServer", //服務器端url地址
data: "name=" + userName, //發(fā)送給服務器端的數(shù)據(jù)
dataType: "xml", //告訴JQuery返回的數(shù)據(jù)格式
success: callback //定義交互完成,并且服務器正確返回數(shù)據(jù)時調(diào)用的回調(diào)函數(shù)
});
}
//回調(diào)函數(shù)
function callback(data) {
var jqueryObj = $(data);
//獲取message節(jié)點
var message = jqueryObj.children();
//獲取文本內(nèi)容
var text = message.text();
//4.將服務器段返回的數(shù)據(jù)動態(tài)的顯示在頁面上
$("#result").html(text);
}
您可能感興趣的文章:
- java+jquery處理xml數(shù)據(jù)的方法
- jquery處理json數(shù)據(jù)實例分析
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- jQuery處理xml格式的返回數(shù)據(jù)(實例解析)
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- 詳談 Jquery Ajax異步處理Json數(shù)據(jù).
- 在jquery中處理帶有命名空間的XML數(shù)據(jù)
- jQuery jqgrid 對含特殊字符json 數(shù)據(jù)的 Java 處理方法
- jQuery getJSON 處理json數(shù)據(jù)的代碼
- jQuery常用數(shù)據(jù)處理方法小結(jié)
相關文章
jQuery使用$.ajax進行異步刷新的方法(附demo下載)
這篇文章主要介紹了jQuery使用$.ajax進行異步刷新的方法,涉及jQuery實現(xiàn)ajax異步刷新實現(xiàn)數(shù)據(jù)交互的相關技巧,并提供了完整示例demo供讀者下載參考,需要的朋友可以參考下2015-12-12前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等](持續(xù)更新)
在公司做這個項目已經(jīng)6個多月了,總結(jié)一些問題,也算是拋磚引玉吧,希望更多的朋友一起分享一些技巧。2010-03-03把jquery 的dialog和ztree結(jié)合實現(xiàn)步驟
首先準備好juqury-ui、ztree 的js文件和css 文件,接下來的步驟祥看本文希望對大家有所幫助2013-08-08