前端之家收集整理的这篇文章主要介绍了
ajax值数据传递，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
发送xml数据
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;
}
public static void main(String[] args) {
}
}
package json;
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;
public class XMLServlet extends HttpServlet {
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
@Override
protected void doPost(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException {
//发的是xml数据，设置响应头信息
resp.setContentType("text/xml;charset=utf-8");
resp.setHeader("praga","no-cache");
resp.setHeader("cache-control","no-cache");
//
String name = req.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生成xml文档
Document document = DocumentHelper.createDocument();
Element rootElement = document.addElement("users");
rootElement.addComment("This is a 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());
addressElement.setText(person.getAddress());
ageElement.setText(person.getAge()+"");
PrintWriter writer = resp.getWriter();
OutputFormat format = OutputFormat.createPrettyPrint();
format.setEncoding("utf-8");
//输出到客户端
XMLWriter xmlWriter = new XMLWriter (writer,format);
xmlWriter.write(document);
writer.flush();
}
}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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="jquery/jquery-1.4.4.js"></script>
<script type = "text/javascript">
$(document).ready (function (){
$("#button1").bind ("click",function (){
$.ajax({
type:"POST",url:"XMLServlet",dateType:"xml",data:{name:$("#name").val()},success:function (returnedDate){//returnedDate从服务器传来的数据
var id = $(returnedDate).find("id").text();
var name = $(returnedDate).find ("name").text();
var age = $(returnedDate).find ("age").text();
var address = $(returnedDate).find ("address").text();
var html = "<table width = '100%' border = '1'><thead><tr><td>id</td><td>name</td><td>age</td><td>address</td></tr></thead><tbody><tr><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></tbody></table>";
$("#content table:eq(0)").remove();
$("#content").append($(html));
}})
});
});
</script>
</head>
<body>
<select id = "name">
<option value = "zhangsan">zhangsan</option>
<option value = "lisi">lisi</option>
</select>
<input type = "text" name = "param1" id = "param1" /><input name = "param2" type = "text" id = "param2" /><input type = "button" value = "get the text from servlet" id = "button1"/>
<div id = "content">
</div>
</body>
</html>
/**************************************
直接送post方法向服务器发送数据
//1:请求的路径2：请求的数据3:回调函数
$.post("XMLServlet",{
name:$("#name").val()
},function (returnedDate,status) {
var id = $(returnedDate).find("id").text();
var name = $(returnedDate).find ("name").text();
var age = $(returnedDate).find ("age").text();
var address = $(returnedDate).find ("address").text();
var html = "<table width = '100%' border = '1'><thead><tr><td>id</td><td>name</td><td>age</td><td>address</td></tr></thead><tbody><tr><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></tbody></table>";
$("#content table:eq(0)").remove();
$("#content").append($(html));
})
***************************************/
如果用get方法向服务器传送数据，将$.post 改成$.get
其实底层都是调用$.ajax()来实现的。
package model;
import java.util.List;
public class People {
private int id;
private String name;
private Address address;
private List<People> friends;
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 Address getAddress() {
return address;
}
public void setAddress(Address address) {
this.address = address;
}
public List<People> getFriends() {
return friends;
}
public void setFriends(List<People> friends) {
this.friends = friends;
}
}
package json;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import model.Address;
import model.People;
public class GsonServlet extends HttpServlet {
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
@Override
protected void doGet(HttpServletRequest req,IOException {
//!!!!!!important
resp.setContentType("application/json");
resp.setHeader("praga","no-cache");
List<People> list = new ArrayList<People> ();
People people1 = new People ();
Address address1 = new Address ();
address1.setHomeAddress("beijing");
address1.setCompanyAddress("shanghai");
people1.setId(1);
people1.setName("zhangsan");
people1.setAddress(address1);
People person1 = new People ();
person1.setId(5);
person1.setName("zhangsan1");
People person2 = new People ();
person2.setId(6);
person2.setName("zhangsan2");
List<People> list1 = new ArrayList<People>();
list1.add(person1);
list1.add (person2);
people1.setFriends(list1);
/*****************************************/
People people2 = new People ();
Address address2 = new Address ();
address2.setHomeAddress("tianjing");
address2.setHomeAddress("jiangshu");
people2.setId(2);
people2.setName("lisi");
people2.setAddress(address2);
List<People> list2 = new ArrayList<People>();
People person3 = new People ();
person3.setId(1000);
person3.setName("lisi2");
People person4 = new People ();
person4.setId(2000);
person4.setName("lisi3");
list2.add(person3);
list2.add(person3);
people2.setFriends(list2);
list.add(people1);
list.add(people2);
//使用Gson转化成json数据
Gson gson = new Gson ();
String result = gson.toJson(list);
System.out.println(result);
PrintWriter out = resp.getWriter();
out.println(result);
out.close();
}
}
<%@ 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 'json2.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,keyword3">
<Meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type = "text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type = "text/javascript">
$(document).ready (function () {
$("input:eq(0)").click (function () {
$.get ("GsonServlet",{},function (returnedData,status){
var html = "<table border = '1' width = '80%'><thead><tr><th>id</th><th>name</th><th>homeaddress</th><th>companyaddress</th></tr></thead>";
for (var i = 0;i < returnedData.length;i++) {
var people = returnedData[i];
var id = people.id;
var name = people.name;
var homeaddress = people.address.homeAddress;
var companyaddress = people.address.companyAddress;
html+="<tr align = 'center'><td>"+id+"</td><td>"+name+"</td><td>"+homeaddress+"</td><td>"+companyaddress+"</td></tr>"
}
html+="</table>";
$("#content table").remove();
$("#content").html(html);
});
});
});
</script>
</head>
<body>
<input type = "button" value = "get the data of json from the server" />
<div id = "content">
</div>
</body>
</html>
原文链接：https://www.f2er.com/ajax/166454.html
