xml.jsp
%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'xml.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="scripts/jquery-1.3.1.js">
</script>
<script type="text/javascript">
$(function()
{
$("#button1").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><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr>";
$("#theBody table:eq(0)").remove();
$("#theBody").append(html);
}
})
})
})
</script>
</head>
<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"></input>
</body>
</html>
person.java
package com.sun.model;
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;
}
}
XMLServlet.java
package com.sun.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;
import com.sun.model.Person;
public class XMLServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name=request.getParameter("name");
Person person=new Person();
if("zhangsan".equals(name)){
person.setId(1);
person.setName("zhangsan");
person.setAddress("beijing");
person.setAge(30);
}else{
person.setId(2);
person.setName("lisi");
person.setAddress("shanghai");
person.setAge(20);
}
//下面采用DOM4J
Document document=DocumentHelper.createDocument();//创建文档对象
Element rootElement=document.addElement("users");//创建根元素
rootElement.addComment("This is a comment!");//注释
Element userElement=rootElement.addElement("user");//增加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());
//设定相应类型，要让jquery知道这是一个xml相应的
response.setContentType("text/xml;charset=utf-8");
//浏览器禁用缓存
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
//将数据发送给客户端
PrintWriter out = response.getWriter();
OutputFormat format =OutputFormat.createPrettyPrint();
format.setEncoding("utf-8");
XMLWriter xmlWriter=new XMLWriter(out,format);
xmlWriter.write(document);
out.flush();
out.close();
}
}
$.post 提交
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'xml.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="scripts/jquery-1.3.1.js">
</script>
<script type="text/javascript">
$(function()
{
$("#button1").click(function()
{
//$.post("请求资源路径",{向服务器端发送的数据},回调函数)
$.post("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><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr>";
$("#theBody table:eq(0)").remove();
$("#theBody").append(html);
}
})
})
</script>
</head>
<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"></input>
</body>
</html>
分享到：
相关推荐
1. jQuery的$.get和$.post方法：这两种方法是jQuery提供的Ajax（异步JavaScript和XML）接口，用于与服务器进行非刷新的数据交换。$.get用于发送GET请求，而$.post用于发送POST请求。它们都接受四个参数：URL、数据、...
在JavaScript的世界里，jQuery库提供了一种简便的方式来与服务器进行异步交互，这就是$.ajax方法。这个功能强大的函数使得前端开发者无需刷新整个页面就能获取或发送数据，极大地提升了用户体验。本文将深入探讨如何...
结合其他jQuery的Ajax方法，如`$.post()`和`$.getJSON()`，我们可以构建出功能丰富的、用户体验良好的Web应用。在实际开发中，理解并熟练运用这些工具至关重要，以便更好地优化和提升我们的项目。
$.ajax()方法是jQuery库中的一个核心函数，用于执行异步HTTP（Ajax）请求。它提供了丰富的选项来定制请求的方方面面，使得与服务器之间的数据交互变得简单易行。以下是$.ajax()方法的主要参数及其详细解释： 1. **...
在jQuery中，$.ajax()和$.getJSON()是两种常见的用于发送Ajax请求的方法，它们主要用于与服务器进行异步数据交互。然而，在某些特定场景下，如处理表单提交前的验证，可能需要同步处理请求，确保数据正确无误后再...
在jQuery库中，$.get()和$.post()是两种非常常用的Ajax请求方法，它们用于向服务器发送异步请求，获取或提交数据，而无需刷新整个页面。这些方法都是全局函数，与jQuery对象的方法如.load()有所不同，后者是对特定...
`jQuery`提供了`$.ajax()`, `$.post()`, 和 `$.get()`等方法来实现异步请求。本文将深入探讨`jQuery`中的`POST`和`GET`异步调用方式。 1. **GET方式** `GET`是最常见的HTTP请求方法，通常用于获取资源。在jQuery中...
JQuery中的$.ajax()方法是前端开发中常用的一种实现AJAX通信的方式，它提供了一种灵活而强大的途径来进行异步的HTTP请求。下面，我们将详细介绍$.ajax()方法的各个参数以及它们的作用和用法。 1. url：这是一个字符...
jQuery的Ajax方法主要包括`$.ajax()`, `$.get()`, `$.post()`, `$.getJSON()`等。这些方法都提供了一种优雅的方式来发送和接收数据，同时提供了丰富的配置选项来处理各种情况。 ### 1. `$.ajax()` `$.ajax()`是...
$.ajax()是jQuery库中用于AJAX通信的底层方法，它封装了原生的AJAX实现，并提供了简单易用的接口。该方法仅接受一个参数，即一个包含设置和回调函数的对象，所有的参数都是可选的。通过$.ajax()方法，开发者可以指定...
本文将深入探讨jQuery异步调用的机制，通过实例解析其工作原理，帮助你更好地理解和应用。 一、jQuery的异步调用基础 1. AJAX（Asynchronous JavaScript and XML）是实现异步调用的核心技术，jQuery将其封装得更加...
$.ajax()方法是jQuery库中的一个核心功能，用于在后台与服务器进行异步数据交互，无需刷新页面。熟练掌握$.ajax()的参数设置对于前端开发至关重要。以下是对这些参数的详细解释： 1. **url**: 这是一个String类型的...
在JQuery众多功能中，$.ajax()方法是实现Ajax请求的重要方法。通过$.ajax()，开发者可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。本文将详细介绍$.ajax()方法的各个参数以及如何应用。 ...
jQuery是一个流行的JavaScript库，...总之，$.ajax()方法是jQuery实现Ajax请求的核心，通过它可以方便地对各种类型的数据进行异步请求。熟练掌握$.ajax()方法的使用，可以帮助开发者更好地构建动态网页和提高用户体验。
3. 如果可能，可以考虑使用JQuery的$.get或$.post方法，这两种方法是$.ajax的简化版，它们没有$.ajax那么多的配置选项，但在很多情况下已经足够使用。虽然它们没有全局选项来控制，但使用它们时应该注意检查是否有...
jQuery提供`$.getJSONP()`或在`$.ajax()`中设置`dataType: 'jsonp'`来实现。 ### 8. 路径和数据缓存 默认情况下，Ajax请求不会缓存数据。如果需要开启缓存，可以在Ajax设置中添加`cache: true`。 ### 9. 阻止页面...