重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么在ajax中使用json传输数据

本篇文章给大家分享的是有关怎么在ajax中使用json传输数据,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

创新互联坚信:善待客户,将会成为终身客户。我们能坚持多年,是因为我们一直可值得信赖。我们从不忽悠初访客户,我们用心做好本职工作,不忘初心,方得始终。10多年网站建设经验创新互联是成都老牌网站营销服务商,为您提供网站设计、成都网站制作、网站设计、HTML5建站、网站制作、成都品牌网站建设重庆小程序开发服务,给众多知名企业提供过好品质的建站服务。

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包

怎么在ajax中使用json传输数据

传输单个对象:

新建一个 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);
 }
}

效果如下:

怎么在ajax中使用json传输数据

jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>




Insert title here


$(document).ready(function(){
 $("#k").click(function(){
  $.ajax({
   url:"C",
   data:{},
   type:"POST",
   dataType:"JSON",
   success:function(httpdata){
    $("#x").append("
  • "+httpdata.obj.name+"
  • ");     $("#x").append("
  • "+httpdata.obj.age+"
  • ");     $("#x").append("
  • "+httpdata.obj.zl+"
  • ")    }   })  }); }); 查看

    效果如下:

    怎么在ajax中使用json传输数据

    传输集合或数组:

    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 list=new ArrayList();
      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);
     }
    }

    效果如下:

    怎么在ajax中使用json传输数据

    jsp页面:

    <%@ page language="java" contentType="text/html; charset=utf-8"
     pageEncoding="utf-8"%>
    
    
    
    
    Insert title here
    
    
    $(document).ready(function(){
     $("#k").click(function(){
      $.ajax({
       url:"D",
       data:{},
       type:"POST",
       dataType:"JSON",
       success:function(httpdata){
        for(var i=0;i"
          tr+=""+a+""
          tr+=""+z+""
          tr+=""
          $("#x").append(tr)
        } 
       }
      })
     });
    });
    
    
    
    查看
    

     效果如下:

     怎么在ajax中使用json传输数据

    以上就是怎么在ajax中使用json传输数据,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


    网站标题:怎么在ajax中使用json传输数据
    分享URL:http://cqcxhl.cn/article/gjoosg.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP