一、在servlet类中添加几个javabean对象，放置数据。

package com.aaa.servlet;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

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 com.aaa.entity.User;

import com.alibaba.fastjson.JSON;

@WebServlet("/DemoServlet")

public class DemoServlet extends HttpServlet {

    public DemoServlet() {

        super();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setCharacterEncoding("utf-8");

        List<User>list=new ArrayList<>();

        User u1 = new User(1,"哈哈","565");

        User u2 = new User(1,"嘻嘻","666");

        User u3 = new User(1,"吉吉","999");

        list.add(u1);

        list.add(u2);

        list.add(u3);

        //将制定的对象 ，转换成json对象

        String result=JSON.toJSONString(list);

        response.getWriter().write(result);

    }

    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"%>

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!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.2.js"></script>

    <script type="text/javascript">

    /*

        ajax利用json进行数据传送的三种方式？

        1.导入jQuery 包

        2.导入三个jar包  1.fastjson-1.2.9.jar  2.taglibs-standard-impl-1.2.5.jar 3.taglibs-standard-spec-1.2.5.jar   

        三个参数  1跳转到后台的URL地址  2.需要向跳转的后台servlet传递的参数

        3.回调函数，用户接受收后台响应过来的对象 backdate status xmlhttpreque

    */

    function getTestGet(){

        $.get(

                "<c:url value='/DemoServlet'/>",  // 需要跳转到后台的URL地址

                {"name":"test"},                   // 需要向跳转到后台的servlet传递的参数

                function(backData,status,xmlHttpRequest){  //回调函数

                //得到本次ajax请求响应的文本内容

                var result=eval(backData);

                alert(result[2].password);

                alert(status+"----status");

                alert(xmlHttpRequest+"---");

        });

    }

    //2.post 的提交方式

    function getTestPost(){

        $.post(

            "<c:url value='/DemoServlet'/>",

            {"name":"test"},

        function(backData,status,xmlHttpRequest){

            //回调函数的函数体  用于解析异步请求的servlet响应过来的信息内容

            alert(backData[0].username);

            alert(status+"--status");

            //得到本次ajax请求响应的文本内容和 backdate相似

            //xmlhttprequest 不需要参数时 可以省略

            alert(xmlHttpRequest.rsponseText+"---");

        },"json");

    }

    //3.ajax 的提交方式

    function getTestAjax(){

        $.ajax({

            type:"get",

            url:"<c:url value='DemoServlet'/>",

            dataType:"json",

            success:function(backData,status,xmlHttpRequst){

                //类似于 foreach    便利的作用。

                $.each(backData,function(i,u){

                    alert(i+"--"+u.username+"---"+u.password);

                });

            },

            error:function(xmlHttpRequest,status,errorThrown){

                alert("出错了！");

            }

        });

    }

    </script>

<body>

        <input  type="button" onclick="getTestGet();" value="get的提交方式"/>

        <input  type="button" onclick="getTestPost();" value="post的提交方式"/>

        <input  type="button" onclick="getTestAjax();" value="ajax"/>

</body>

</html>

ajaxl利用json 传送数据的 三种提交方式？的更多相关文章

  1. .NET的JSON格式数据的三种转换方式

    说明: 1..Net进行JSON格式的数据传递的时候,势必用到序列化和反序列化对象,总共有三种方式可是在.NET中实现序列化和反序列化的需求. 2.操作JSON的速度是:Json.net > M ...

  2. Docker与数据：三种挂载方式

    操作系统与存储 操作系统中将存储定义为 Volume(卷) ,这是对物理存储的逻辑抽象,以达到对物理存储提供有弹性的分割方式.另外,将外部存储关联到操作系统的动作定义为 Mount(挂载). Dock ...

  3. python爬虫之数据的三种解析方式

    一.正则解析 单字符: . : 除换行以外所有字符 [] :[aoe] [a-w] 匹配集合中任意一个字符 \d :数字 [0-9] \D : 非数字 \w :数字.字母.下划线.中文 \W : 非\ ...

  4. axios POST提交数据的三种请求方式写法

    1.Content-Type: application/json import axios from 'axios' let data = {"code":"1234&q ...

  5. axios post提交数据的三种请求方式

    1.Content-Type: application/json import axios from 'axios' let data = {"code":"1234&q ...

  6. form表单4种提交方式

    <!DOCTYPE html><html> <head> <title>JavaScript表单提交四种方式</title> <met ...

  7. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  8. jQuery中通过JSONP来跨域获取数据的三种方式

    第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', su ...

  9. ios网络学习------4 UIWebView的加载本地数据的三种方式

    ios网络学习------4 UIWebView的加载本地数据的三种方式 分类: IOS2014-06-27 12:56 959人阅读 评论(0) 收藏 举报 UIWebView是IOS内置的浏览器, ...

随机推荐

  1. 本原串(hdu 2197)

    本原串 题目链接 思路: 反向想将总的个数减去不符合要求的个数.我们枚举n的约数,然后把n平均分,就可以构成不符合要求的串,\(g[i]\)表示循环节长为i约数的个数\(2^i\),我们要求循环节为\ ...

  2. 【LeetCode】61. Rotate List 解题报告（Python）

    [LeetCode]61. Rotate List 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fux ...

  3. hdu-1299 Diophantus of Alexandria(分解素因子)

    思路: 因为x,y必须要大与n,那么将y设为(n+k);那么根据等式可求的x=(n2)/k+n;因为y为整数所以k要整除n*n; 那么符合上面等式的x,y的个数就变为求能被n*n整除的数k的个数,且k ...

  4. 关于 TCP/IP

    基于TCP/IP的参考模型将协议分成四个层次,它们分别是链路层.网络层.传输层和应用层. (1)应用层:这里面有http,ftp 等等我们熟悉的协议. (2)传输层:著名的TCP和UDP协议就在这个层 ...

  5. Drools创建Maven工程

    1.说明 本文介绍创建Drools的Maven工程的方法, 仅使用Eclipse开发工具, 不使用Drools的相关插件, 先创建一个Maven工程, 然后引入Drools的相关依赖即可, 最后再写一 ...

  6. JZOJ 3296 Luogu P3296 [SDOI2013]刺客信条

    前言 做法来自:@pzrpzr ,写一下!Orz pzr! 题目大意 \(n\) 个点的无根树,每个点有两个 \(0/1\) 权值,合适地安排节点在同构树中的顺序,使得前后对应的权值不同节点个数最小, ...

  7. Linux 使用 tail 命令查看文件内容

    使用方法: $ tail --help 用法:tail [选项]... [文件]... 以标准输出的形式打印文件的最后10行内容: 如果不指定文件,或者文件为"-",则从标准输入中 ...

  8. python的赋值、浅拷贝和深拷贝

    """ 一.赋值在python中就是简单的对象引用 """ list_a = ["aaa", "bbb&quo ...

  9. mybatis-plus中查询出的字段为空

    数据查询出后其中几个字段为null 解决方法: 数据库的字段命名方式为使用下划线连接,对应的实体类应该是驼峰命名方式,而我使用的是和数据库同样的命名方式. 所以mybatis-plus映射不到,修改实 ...

  10. 虚拟机上CentOS7网络配置

    如果图片损坏:点击链接:https://www.toutiao.com/i6493449418249863693/ 设置网络 首先打开虚拟网络编辑器 权限打开 选择NAT模式,设置IP 应用确定之后, ...