jQuery异步调用post,get (重要)
2012-05-17 11:23
246 查看
把[b]jquery-1.7.2.js放在WebRoot目录下的[b][b]scripts文件夹内（[b][b][b][b]scripts[/b][/b][/b]是自己创建的文件夹）[/b][/b][/b]
[/b]
把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;
[b]//下面一行导入的是另外编写的一个Person类，含有id,name,age,address属性，并生成它们的get和set方法。（代码略）
import com.xuankai.model.Person;
[/b]
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>
运行结果为：
下拉菜单选择zhangsan时的结果为：
[b]下拉菜单选择lisi时的结果为：
[/b]
[/b]
把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;
[b]//下面一行导入的是另外编写的一个Person类，含有id,name,age,address属性，并生成它们的get和set方法。（代码略）
import com.xuankai.model.Person;
[/b]
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>
运行结果为：
下拉菜单选择zhangsan时的结果为：
[b]下拉菜单选择lisi时的结果为：
[/b]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- django 1.4 利用jquery实现ajax ‘get|post’异步请求
- jquery 之ajax,get,post异步请求简单代码模版
- jQuery：$post、$get、$ajax与php，实现异步加载
- jQuery调用RESTful WCF示例(GET方法/POST方法)
- jQuery：$post、$get、$ajax与php，实现异步加载
- ajax，jquery，$.post/$.get异步刷新div,局部刷新页面
- RestTemplate之GET和POST调用和异步回调
- JQuery 异步处理，ajax post get getJSON...
- jQuery调用RESTful WCF示例代码(GET方法/POST方法)
- jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
- JQuery加载外部文件的方式get、post、ajax、load的区别及异步加载的实现
- jQuery调用RESTful WCF示例代码(GET方法/POST方法)
- Jquery $.ajax $.post $.get 异步请求 return undefined null问题
- jQuery的ajax()检验用户名；通过jQuery的load()/get()/post()方法实现；使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- jquery调用WebService返回JSON(GET , POST)
- jquery 常用异步请求（ajax,post,get）和json对象的遍历
- jQuery基础（Ajax，load()，getJSON()，getScript()，post()，ajax()，同步/异步请求数据）
- jQuery_review之通过$.get()和$.post()方法来实现异步加载
- JQuery的Ajax使用Get,Post方法调用C#WebService并返回数据
- 自定义Volley添加请求头、发送Post请求、Volley的同步和异步、getParams 不被调用