jquery 异步调用$.ajax() $.post() $.get()

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>

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

<!--

-->

</script>

$(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>

zhangsan

</option>

lisi

</option>

</select>

</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>

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

<!--

-->

</script>

$(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>

zhangsan

</option>

lisi

</option>

</select>

</body>

</html>

jquery 异步调用$.ajax() $.post() $.get()

猜你喜欢