jquery异步传输3种不同数据类型html、xml、json

最新推荐文章于 2023-01-05 18:13:01 发布
最新推荐文章于 2023-01-05 18:13:01 发布
阅读量1.1k 收藏
点赞数
分类专栏： json 文章标签： ajax Gson json post 异步传输
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moneyzhong/article/details/8333897
版权

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;
 }
 
}

 

 

 

 

 

 

 

 

 

moneyZhong
关注
专栏目录
jQuery xml-to-json xml转JSON插件
03-17
jQuery xml-to-json xml转JSON jQuery实现xml转JSON插件 有demo和相关文档
jquery使用ajax异步传输
mockingbirds的专栏
06-28 4743
前面两篇博文学习了jquery的基本选择器，以及一些基本的案例。在jquery中还为我们提供了一个很方便的用法，那就是ajax请求，简化了传统的使用xmlhttprequest进行ajax请求的写法。这里我以一个简单的用户注册来作为demo。使用$.get和$.post实现异步请求index.jsp<%@ page language="java" import="java.util.*" pageE
一个xmltojson类
weixin_30448603的博客
09-25 74
CodeusingSystem.Text;usingSystem.Xml;usingSystem.Collections;publicclassxmltojson{publicxmltojson(){////TODO:在此处添加构造函数逻辑//}//这里我将它变成了public的属性。publicstaticstring...
使用JQ实现将xml数据转为json数据
最新发布
weixin_35756690的博客
01-05 368
使用 JQ 将 XML 数据转换为 JSON 数据可以使用 jq 命令。 例如，假设你有一个名为 input.xml 的 XML 文件，你可以使用以下命令将其转换为 JSON 格式： catinput.xml | jq -r '@xml' > output.json 这将使用 JQ 的 @xml 内建函数将 XML 数据解析为 JSON 对象，并将其写入名为 output.json 的文件...
XmlToJson:Android库，用于将XML转换为JSON以及将JSON转换为XML
05-08
适用于Android的XML到JSON XML to JSON是一个Android Studio库，可轻松将XML转换为JSON以及将JSON转换为XML 。 它是完全可配置的，因此您可以更改例如属性名称。 与gradle集成很容易。 XML到JSON 基本用法 有两种创建XmlToJson对象的方法：从String或从InputStream 。 String xmlString; // some XML String previously created XmlToJson xmlToJson = new XmlToJson . Builder (xmlString) . build(); 或者 AssetManager assetManager = context . getAssets(); InputStream inputStream =
jQuery实现异步获取json数据的2种方式
10-25
在jQuery中，异步获取JSON数据主要有两种常用的方式，分别是$.getJSON()方法和$.ajax()方法。 首先，$.getJSON()是一个简化版的$.ajax()方法，专门用于请求JSON格式的数据。它返回一个Promise对象，这使得它可以...
JQuery的ajax获取数据后的处理总结(html,xml,json)
10-29
XML（Extensible Markup Language）是一种标记语言，用于存储和传输数据，它也经常在ajax请求中作为数据交互格式。在使用JQuery处理XML数据时，通常会利用JQuery提供的方法来操作XML文档结构。可以通过XPath或CSS...
详谈 Jquery Ajax异步处理Json数据.
01-19
所谓的Ajax.... } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类. 但都返回Json格式
struts2+jquery+json实现异步加载数据(自写)
10-27
异步加载数据的实现方式有多种，常见的有Ajax（Asynchronous JavaScript and XML），JSONP（JSON with Padding）等。 ### 知识点二：Struts2框架简介 Struts2是Apache软件基金会下的一个开源MVC框架，它用于构建...
jQuery解析返回的xml和json方法详解
10-20
在JavaScript和前端开发中，jQuery库提供了一种方便的方式来处理XML和JSON数据，尤其是在与服务器进行异步交互（Ajax）时。本篇文章将详细介绍如何使用jQuery解析从服务器返回的XML和JSON数据。 首先，让我们来看...
xmltojson有效的方法
06-10
自己用的好东西 在网页中想后台传递多个数据时，有时数据还是多个动态列表，数据很复杂时，JavaScript程序员喜欢把他们作为json串进行处理，后台收到后需要对json字符串进行解析，幸好有JSON-lib，这个Java类包用于把bean,map和XML转换成JSON并能够把JSON转回成bean和DynaBean。
Jquery
weixin_44894727的博客
04-26 96
Ajax 1，xmlhttprequest 2，callback 3，reponseText JSON 1，什么是JSON？ JS中的原生数据格式，类似Java中的引用类型（对象，集合）。 2，JSON语法规则 {名称:值,名称:值…} ----------- > User [{名称:值,名称:值…},{},{}…]-----------> List {名称:{名称:值,…}} ---...
格式转换，XMLtoJSON
phla_han的专栏
07-09 693
格式转换，XMLtoJSON
jQuery插件-JSON与XML互转
弗里曼的小伙伴
12-16 6805
jQuery插件-JSON与XML互转 sf2gis@163.com 2015年12月16日   1  目标：JSON与XML相互转换 2 原理：字符串与正则表达式处理。 3 流程：安装js插件，使用转换函数。 3.1 安装js:添加jQuery,json2xml，xml2json。 下载地址：http://json.cn/download/jquery.xml2json.js
jQuery发送数据的3种方式
专业大神之路
03-25 3806
&lt;script src="/js/jquery-1.11.3.js" &gt;&lt;/script&gt; &lt;script&gt; // 采用get方式发送数据 function jq_get(){ //$.get("/demo","username=zs&amp;password=123",function(obj){ var params = {
jquery不同页面之间传值的方法
热门推荐
caimaomaocai的博客
01-06 1万+
百度到的方法 1：就是url 参数拼接 通过QueryString获取参数 2：cookie 3：h5本地存储 localStorage 长期存在 / sessionStorage 打开存在 4：window.open 等等 我目前实践过的方法就是第1种，通过url参数拼接，再取值，相关代码如下 把需要的参数放在url，然后在跳转的页面拿到id，传到后台获取到对应的数据   在跳转的...
XmlToJson转换
xiaoxiaoabc_123
02-20 3288
package com.tony; import java.io.ByteArrayInputStream; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.util.HashMap; import java.util.LinkedList; im
一个实用的 Javascript XML to JSON Object 对象的转换 （JQuery）
SUB 的专栏
10-11 8091
一个实用的 Javascript XML to JSON  Object 对象的转换 （JQuery）一个用来将xml文件转换成对象的插件 xml文件如下   TreeView   ListGrid   ListBox 1 生成的对象为: 调用 var xml = $.loadXML("PluginConf.xml"); var obj = $(xml).toObjec
jQuery中的Ajax 详解
Hello World!
07-26 1302
jQuery提供了几个用于发送Ajax请求的函数. 其中最核心也是最复杂的是jQuery.ajax( options ),所有的其他Ajax函数都是它的一个简化调用. 当我们想要完全控制Ajax时可以使用此结果, 否则还是使用简化方法如get, post, load等更加方便. 所以jQuery.ajax( options ) 方法放到最后一个介绍. 先来介绍最简单的load方法: 1.
jQuery异步通信实战：JSON数据传输与简单示例
本篇文章主要介绍了如何使用jQuery库实现异步通信，特别是通过JSON数据进行传递。jQuery作为流行的JavaScript库，提供了简化开发的API，强调“写更少，做更多”。文章首先强调了引入jQuery库的重要性，推荐读者从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值