jquery异步传输3种不同数据类型html、xml、json
来源：互联网 发布：c语言退出程序代码 编辑：程序博客网 时间：2024/04/29 04:40
jquery异步传输方式：
①返回html类型的数据
jsp代码如下：
- <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
$.ajax({
type:"post",
url:"MyServlet",
dateType:"html",
data:{'param1':$("#param1").val(), 'param2':$("#param2").val()},
success:function(returnedData){
$("#result").attr("value",returnedData);
}
});
});
});
</script>
<body>
<input type="text" id="param1" size="5"> +
<input type="text" id="param2" size="5">
<input type="button" value="sum" id="button1">
<input type="text" id="result" size = "5">
</body>
</html>
MyServlet代码如下：
package com.json.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;
public class MyServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//在前台控制输入只能为数字
int param1 = Integer.parseInt(req.getParameter("param1"));
int param2 = Integer.parseInt(req.getParameter("param2"));
resp.setContentType("text/html;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print(String.valueOf(param1+param2));
pw.flush();
}
}
②返回xml数据（ajax和post两种不同方式，post方式底层也是调用ajax）需要添加dom4j.jar包
jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
/*$.ajax({
type:"post",
url:"XMLServlet",
dataType:"xml",
data:{'name':$("#name").val()},
success:function(returnData){
var id = $(returnData).find("id").text();
var name = $(returnData).find("name").text();
var age = $(returnData).find("age").text();
var address = $(returnData).find("address").text();
$("#theBody table:eq(0)").remove();
var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";
$("#theBody").append(html);
}
});*/
$.post("XMLServlet",{
name:$("#name").val()
},function(returnData,status){
var id = $(returnData).find("id").text();
var name = $(returnData).find("name").text();
var age = $(returnData).find("age").text();
var address = $(returnData).find("address").text();
$("#theBody table:eq(0)").remove();
var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";
$("#theBody").append(html);
}
);
});
});
</script>
<body id="theBody">
<select id="name">
<option value="zhangsan">zhangsan</option>
<option value="lisi">lisi</option>
</select>
<input type="button" id="button1" value="get context from server">
</body>
</html>
XMLServlet代码如下：
package com.json.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.json.dto.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.setAddress("beijing");
person.setAge(30);
}else
{
person.setId(2);
person.setName("lisi");
person.setAddress("shanghai");
person.setAge(20);
}
Document document = DocumentHelper.createDocument();
Element rootElement = document.addElement("users");
rootElement.addComment("This s 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());
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();
}
}
所使用到的Person代码如下：
package com.json.dto;
public class Person {
private int id;
private String name;
private int age;
private String address;
public Person(int id, String name, int age, String address) {
super();
this.id = id;
this.name = name;
this.age = age;
this.address = address;
}
public Person() {
super();
}
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;
}
}
③json数据形式（需要导入gson.jar包）
jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
$.ajax({
type:"post",
url:"JsonServlet",
dataType:"json",
data:{},
success:function(returnData){
var html="<table align='center' width='60%' border='1'><tr><th>id</th><th>name</th><th>homeAddress</th><th>companyAddress</th></tr>";
for(var i = 0; i < returnData.length; i++)
{
var people = returnData[i];
var id = people.id;
var name = people.name;
var companyAddress = people.address.companyAddress;
var homeAddress = people.address.homeAddress;
html += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+companyAddress+"</td><td>"+homeAddress+"</td></tr>"
}
html += "</table>";
$("#tbody table:eq(0)").remove();
$("#tbody").append(html);
}
});
});
});
</script>
<body id="tbody">
<input type="button" value="get json from server" id="button1">
</body>
</html>
JsonServlet代码如下：
package com.json.servlet;
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 com.json.dto.Address;
import com.json.dto.People;
public class JsonServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
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 people11 = new People();
people11.setId(5);
people11.setName("zhangsan11");
People people12 = new People();
people12.setId(6);
people12.setName("zhangsan12");
List<People> list1 = new ArrayList<People>();
list1.add(people11);
list1.add(people12);
people1.setFriends(list1);
System.out.println("-------------------");
People people2 = new People();
Address address2 = new Address();
address2.setCompanyAddress("liaoning");
address2.setHomeAddress("jilin");
people2.setId(2);
people2.setName("lisi");
people2.setAddress(address2);
People people21 = new People();
people21.setId(3);
people21.setName("lisi21");
People people22 = new People();
people22.setId(4);
people22.setName("lisi22");
List<People> list2 = new ArrayList<People>();
list2.add(people21);
list2.add(people22);
people2.setFriends(list2);
list.add(people1);
list.add(people2);
Gson gson = new Gson();
String returnData = gson.toJson(list);
resp.setContentType("text/json;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print(returnData);
pw.flush();
}
}
使用到的Address类代码如下：
package com.json.dto;
public class Address {
private String homeAddress;
private String companyAddress;
public String getHomeAddress() {
return homeAddress;
}
public void setHomeAddress(String homeAddress) {
this.homeAddress = homeAddress;
}
public String getCompanyAddress() {
return companyAddress;
}
public void setCompanyAddress(String companyAddress) {
this.companyAddress = companyAddress;
}
}
使用到的People类代码如下：
package com.json.dto;
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;
}
}
- jquery异步传输3种不同数据类型html、xml、json
- jquery异步传输json数据格式实例
- jquery 处理返回数据 html json xml
- json和xml两种传输格式
- xml 转json 传输
- jquery使用ajax异步传输
- Ajax解析html、xml、json、js原生方式、jquery方式
- 使用JQuery的Ajax操作html，xml，json数据
- html与xml不同
- 用JQuery来代替以前的ajax写法.(侧重用于异步传输前后台xml)
- thrift数据类型不同引起的传输问题
- 使用 JSON 进行数据的异步传输
- ajax异步传输json格式的例子
- 使用 JSON 进行数据的异步传输
- HTML、JSON、XML
- rails+jquery+xml+json
- jquery+ajax+json+xml
- jquery异步请求返回JSON
- 开始
- Linux内核链表的研究与应用
- 经典SQL语句大全()
- JAVA 与C++ 混合编程 Java中调用C/C++生成的DLL(转)
- 我的重构初体验
- jquery异步传输3种不同数据类型html、xml、json
- 通过进程ID获得该进程主窗口的句柄
- C++和OC的区别
- 枚举的用法
- 天天记录 - Android invalidate学习使用的例子
- win8安装sql server2005方法
- Android事件分发onInterceptTouchEvent与onTouchEvent
- 通过JNI实现Java和C++的相互调用
- iOS手势
