jQuery+ajax+xml

最後更新：2018-07-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

2.前段頁面代碼

 <body id="theBody">  <select id="name">  <option value="zhangsan">zhangsan</option>  <option value="lisi">lisi</option>  </select>   <input type="button" id="button1" value="get content from server">  </body>

3.javaBean--Person

public class Person {private int id;private String name;private int age;private String address;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}}

4.伺服器端代碼--XMLServlet

protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {String name = req.getParameter("name");Person person = new Person();if("zhangsan".equals(name)){person.setId(1);person.setName("zhangsan");person.setAddress("tianjin");person.setAge(23);}else{person.setId(2);person.setName("lisi");person.setAddress("beijing");person.setAge(30);}//產生XML--DOM4JDocument document = DocumentHelper.createDocument();Element rootElement = document.addElement("users");rootElement.addComment("This is a commont");Element userElement = rootElement.addElement("user");Element idElement = userElement.addElement("id");Element nameElement = userElement.addElement("name");Element ageElement = userElement.addElement("age");Element addressElement = userElement.addElement("address");idElement.setText(person.getId()+"");nameElement.setText(person.getName());ageElement.setText(person.getAge()+"");addressElement.setText(person.getAddress());resp.setContentType("text/html; charset=utf-8"); //設定回應標頭resp.setHeader("pragma", "no-cache"); //無緩衝resp.setHeader("cache-control", "no-cache"); //無緩衝PrintWriter out = resp.getWriter();OutputFormat format = OutputFormat.createPrettyPrint(); //為了方便在firebug裡面查format.setEncoding("utf-8");XMLWriter xmlWriter = new XMLWriter(out,format); //寫到用戶端xmlWriter.write(document);out.flush();}

5.前端頁面處理指令碼

$("#button1").click(function(){$.ajax({ //no need to judge the browser typetype: "POST", //類型url: "XMLServlet", //請求訪問的servletdataType: "xml",   data: {'name': $("#name").val()}, //傳遞的參數，擷取選擇的值success: function(returnedData){   //成功返回的回呼函數//解析傳來的XML--jQuery對象var id = $(returnedData).find("id").text(); //找到id元素並取其值var name = $(returnedData).find("name").text();var age = $(returnedData).find("age").text();var address = $(returnedData).find("address").text();//建立表格顯示格式var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name></th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";$("#theBody table:eq(0)").remove(); //刪除先前的表格$("#theBody").append(html);}});});

6.前端頁面處理指令碼--簡易形式

$("#button1").click(function(){$.post("XMLServlet",{name:$("#name").val()},function(returnedData,status){//解析傳來的XML--jQuery對象var id = $(returnedData).find("id").text(); //找到id元素並取其值var name = $(returnedData).find("name").text();var age = $(returnedData).find("age").text();var address = $(returnedData).find("address").text();//建立表格顯示格式var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name></th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";$("#theBody table:eq(0)").remove(); //刪除先前的表格$("#theBody").append(html);});});

$("#button1").click(function(){$.post("XMLServlet",{name:$("#name").val()},function(returnedData,status){//解析傳來的XML--jQuery對象var id = $(returnedData).find("id").text(); //找到id元素並取其值var name = $(returnedData).find("name").text();var age = $(returnedData).find("age").text();var address = $(returnedData).find("address").text();//建立表格顯示格式var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name></th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";$("#theBody table:eq(0)").remove(); //刪除先前的表格$("#theBody").append(html);});});

$("#button1").click(function(){$.ajax({ //no need to judge the browser typetype: "POST", //類型url: "XMLServlet", //請求訪問的servletdataType: "xml",   data: {'name': $("#name").val()}, //傳遞的參數，擷取選擇的值success: function(returnedData){   //成功返回的回呼函數//解析傳來的XML--jQuery對象var id = $(returnedData).find("id").text(); //找到id元素並取其值var name = $(returnedData).find("name").text();var age = $(returnedData).find("age").text();var address = $(returnedData).find("address").text();//建立表格顯示格式var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name></th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";$("#theBody table:eq(0)").remove(); //刪除先前的表格$("#theBody").append(html);}});});

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More