ajax用json实现数据传输-js教程-PHP中文网

首页

web前端

js教程

ajax用json实现数据传输

亚连

May 22, 2018 pm 04:31 PM

javascript json 数据传输

本文主要介绍了ajax用json实现数据传输的方法，具有很好的参考价值。下面一起来看下吧

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。

1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。

2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。

经过对象、数组2种结构就可以组合成复杂的数据结构了。

使用JSON前需要先的导入json.jar包

传输单个对象：

新建一个 servlet

package com.itnba.maya.a;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
/**
 * Servlet implementation class C
 */
@WebServlet("/C")
public class C extends HttpServlet {
 private static final long serialVersionUID = 1L;
 /**
  * @see HttpServlet#HttpServlet()
  */
 public C() {
  super();
  // TODO Auto-generated constructor stub
 }
 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  //模拟从数据库中查处
  Dog a=new Dog();
  a.setName("小黄");
  a.setAge(5);
  a.setZl("哈士奇");
  JSONObject obj=new JSONObject();
  obj.put("name", a.getName());
  obj.put("age", a.getAge());
  obj.put("zl", a.getZl());
  JSONObject bb=new JSONObject();
  bb.put("obj", obj);
  response.getWriter().append(bb.toString());
 }
 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  doGet(request, response);
 }
}

登录后复制

效果如下：

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>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#k").click(function(){
  $.ajax({
   url:"C",
   data:{},
   type:"POST",
   dataType:"JSON",
   success:function(httpdata){
    $("#x").append("<li>"+httpdata.obj.name+"</li>");
    $("#x").append("<li>"+httpdata.obj.age+"</li>");
    $("#x").append("<li>"+httpdata.obj.zl+"</li>")
   }
  })
 });
});
</script>
</head>
<body>
<span id="k">查看</span>
<h1>
<ul id="x">
</ul></h1>
</body>
</html>

登录后复制

效果如下：

传输集合或数组：

servlet：

package com.itnba.maya.a;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
/**
 * Servlet implementation class D
 */
@WebServlet("/D")
public class D extends HttpServlet {
 private static final long serialVersionUID = 1L;

 /**
  * @see HttpServlet#HttpServlet()
  */
 public D() {
  super();
  // TODO Auto-generated constructor stub
 }
 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  //模拟从数据库中查出
  Dog a1=new Dog();
  a1.setName("小黄");
  a1.setAge(5);
  a1.setZl("哈士奇");
  Dog a2=new Dog();
  a2.setName("中黄");
  a2.setAge(6);
  a2.setZl("泰迪");
  Dog a3=new Dog();
  a3.setName("大黄");
  a3.setAge(7);
  a3.setZl("京巴");
  ArrayList<Dog> list=new ArrayList<Dog>();
  list.add(a1);
  list.add(a2);
  list.add(a3);
  JSONArray arr= new JSONArray();
  //遍历集合
  for(Dog d:list){
   JSONObject obj=new JSONObject();
   obj.put("name", d.getName());
   obj.put("age", d.getAge());
   obj.put("zl", d.getZl());
   arr.put(obj);
  }
  response.getWriter().append(arr.toString());
 }
 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  doGet(request, response);
 }
}

登录后复制

效果如下：

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>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#k").click(function(){
  $.ajax({
   url:"D",
   data:{},
   type:"POST",
   dataType:"JSON",
   success:function(httpdata){
    for(var i=0;i<httpdata.length;i++){
     var n=httpdata[i].name
     var a=httpdata[i].age
     var z=httpdata[i].zl
     var tr="<tr>"
      tr+="<td>"+n+"</td>"
      tr+="<td>"+a+"</td>"
      tr+="<td>"+z+"</td>"
      tr+="</tr>"
      $("#x").append(tr)
    } 
   }
  })
 });
});
</script>
</head>
<body>
<span id="k">查看</span>
<h1>
<table width="100%" id="x" border="1px">
</table>
</h1>
</body>
</html>

登录后复制

效果如下：

上面是我整理给大家的，希望今后会对大家有帮助。

AJAX分页效果简单实现（图文教程）

使用Ajax或Easyui等框架时的Json-lib的处理方案（图文教程）

利用ajax传递数组及后台接收的方法详解

以上是ajax用json实现数据传输的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7542

CakePHP 教程

1381

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

MySQL5.7和MySQL8.0的区别是什么？ Feb 19, 2024 am 11:21 AM

MySQL5.7和MySQL8.0是两个不同的MySQL数据库版本，它们之间有以下一些主要区别：性能改进：MySQL8.0相对于MySQL5.7有一些性能改进。其中包括更好的查询优化器、更高效的查询执行计划生成、更好的索引算法和并行查询等。这些改进可以提高查询性能和整体系统性能。JSON支持：MySQL8.0引入了对JSON数据类型的原生支持，包括JSON数据的存储、查询和索引。这使得在MySQL中处理和操作JSON数据变得更加方便和高效。事务特性：MySQL8.0引入了一些新的事务特性，如原子

PHP 数组转 JSON 的性能优化技巧 May 04, 2024 pm 06:15 PM

PHP数组转JSON的性能优化方法包括：使用JSON扩展和json_encode()函数；添加JSON_UNESCAPED_UNICODE选项以避免字符转义；使用缓冲区提高循环编码性能；缓存JSON编码结果；考虑使用第三方JSON编码库。

Pandas使用教程：读取JSON文件的快速入门 Jan 13, 2024 am 10:15 AM

快速入门：Pandas读取JSON文件的方法，需要具体代码示例引言：在数据分析和数据科学领域，Pandas是一个重要的Python库之一。它提供了丰富的功能和灵活的数据结构，能够方便地对各种数据进行处理和分析。在实际应用中，我们经常会遇到需要读取JSON文件的情况。本文将介绍如何使用Pandas来读取JSON文件，并附上具体的代码示例。一、Pandas的安装

Jackson库中注解如何控制JSON序列化和反序列化？ May 06, 2024 pm 10:09 PM

Jackson库中的注解可控制JSON序列化和反序列化：序列化：@JsonIgnore：忽略属性@JsonProperty：指定名称@JsonGetter：使用获取方法@JsonSetter：使用设置方法反序列化：@JsonIgnoreProperties：忽略属性@JsonProperty：指定名称@JsonCreator：使用构造函数@JsonDeserialize：自定义逻辑

两个iphone怎么传输所有数据详细讲解：迁移旧手机数据的方法 Mar 18, 2024 pm 06:31 PM

很多朋友朋友在更换苹果手机时，想把旧手机内的所有数据全部导入到新手机里，理论上是完全可行的，但在实际操作中是无法做到“转移所有”数据的，本期文章列举几种“转移部分数据”的方法。一、iTunesiTunes是苹果手机预装的软件，可用于迁移旧手机中的所有数据，但需要与电脑配合使用。可通过在电脑上安装iTunes，然后通过数据线连接手机和电脑，使用iTunes进行备份手机内的应用和数据，最后将备份恢复到新的苹果手机上来完成迁移。二、iCloudiCloud是苹果专属的“云空间”工具，可以先在旧手机内登

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

深入了解PHP：JSON Unicode转中文的实现方法 Mar 05, 2024 pm 02:48 PM

深入了解PHP：JSONUnicode转中文的实现方法在开发中，我们经常会遇到需要处理JSON数据的情况，而JSON中的Unicode编码在一些场景下会给我们带来一些问题，特别是当需要将Unicode编码转换为中文字符时。在PHP中，有一些方法可以帮助我们实现这个转换过程，下面将介绍一种常用的方法，并提供具体的代码示例。首先，让我们先了解一下JSON中Un

PHP 数组转 JSON 的快捷技巧 May 03, 2024 pm 06:33 PM

PHP数组可通过json_encode()函数转换为JSON字符串（例如：$json=json_encode($array);），反之亦可用json_decode()函数从JSON转换为数组（$array=json_decode($json);）。其他技巧还包括：避免深度转换、指定自定义选项以及使用第三方库。

See all articles

ajax用json实现数据传输

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题