jQuery异步调用post,get (重要)

最新推荐文章于 2025-03-20 11:00:14 发布

原创最新推荐文章于 2025-03-20 11:00:14 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #html #table #button #border

jQuery 同时被 3 个专栏收录

9 篇文章

订阅专栏

xml

7 篇文章

订阅专栏

servlet

6 篇文章

订阅专栏

本文详细介绍了如何在Java环境中利用Servlet与Dom4j库创建XML文件，并通过jQuery与JavaScript实现从服务器获取XML数据并在页面上动态展示的过程。包括了创建XML文件的基本步骤、数据的生成与存储、以及如何通过前端脚本获取XML内容并进行解析，最终在网页中展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把jquery-1.7.2.js放在WebRoot目录下的scripts文件夹内（scripts是自己创建的文件夹）

把dom4j-1.6.1.jar放在WebRoot/WEB-INF/lib下

1.编写Servlet： XMLServlet

package com.xuankai.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;

//下面一行导入的是另外编写的一个Person类，含有id,name,age,address属性，并生成它们的get和set方法。（代码略）
import com.xuankai.model.Person;

public class XMLServlet extends HttpServlet
{
   @Override
   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.setAge(20);
           person.setAddress("beijing");
       }
       else
       {
           person.setId(2);
           person.setName("lisi");
           person.setAge(25);
           person.setAddress("tianjing");
       }

//使用dom4j创建xml

        Document document = DocumentHelper.createDocument();

       Element rootElement = document.addElement("users");

       rootElement.addComment("This is comment!");

       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/xml;charset=utf-8");
       resp.setHeader("pragma","no-cache");
       resp.setHeader("cache-control","no-cache");

       PrintWriter out = resp.getWriter();

//设置输出格式

OutputFormat format = OutputFormat.createPrettyPrint();

//设置编码格式

        format.setEncoding("utf-8");

       XMLWriter xmlWriter = new XMLWriter(out,format);

       xmlWriter.write(document);

       out.flush();


   }

   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp)
           throws ServletException, IOException
   {
       this.doPost(req,resp);
   }
}

2.编写jsp: xml.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>

    <title>My JSP 'xml.jsp' starting page</title>

   <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
   <script type="text/javascript">
   $(function(){

//Use method : $.ajax() to do it !!
   /*
       $("#button").click(function(){


           $.ajax({

               type:"POST",
               url:"XMLServlet",
               dataType:"xml",
               data:{name:$("#name").val()},
               success: function(returnedData){

                   var id = $(returnedData).find("id").text();
                   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><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td><tr>";

                   $("#body table:eq(0)").remove();
                   $("#body").append(html);
               }


           });

       });
   */

//Use method : $.get() or $.post () to do it !!

        $(function(){

           $("#button").click(function(){

               $.get("XMLServlet",{ name:$("#name").val()},
                       function(returnedData,status){
                   var id = $(returnedData).find("id").text();
                   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><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td><tr>";

                   $("#body table:eq(0)").remove();
                   $("#body").append(html);
               }
               );
           });
       });
   });


   </script>


</head>

<body id="body">

   <select id="name">
       <option value="zhangsan">zhangsan</option>
       <option value="lisi">lisi</option>
   </select>

   <input type="button" value="get content from server" id="button">

</body>
</html>