一、在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. 【LeetCode】486. Predict the Winner 解题报告（Python）

    [LeetCode]486. Predict the Winner 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: ht ...

  2. 3998 - Prime k-tuple

    {p1,..., pk : p1 < p2 <...< pk} is called a prime k -tuple of distance s if p1, p2,..., pk ...

  3. 响应式网页设计（Bootstrap）

    Bootstrap官网 AOS官网 Chrome官方教程 Chrome教程 Bootstrap官网中有许多Bootstrap网站示例,大家可以参考

  4. Java实习生常规技术面试题每日十题Java基础（七）

    目录 1. Java设计模式有哪些? 2.GC是什么?为什么要有GC? 3. Java中是如何支持正则表达式. 4.比较一下Java和JavaSciprt. 5.Math.round(11.5) 等于 ...

  5. Java面向对象笔记 • 【第5章 异常处理】

    全部章节   >>>> 本章目录 5.1 异常概述 5.1.1 程序中的异常 5.1.2 异常分类 5.1.3 实践练习 5.2 try-catch处理异常 5.2.2 使用f ...

  6. 数据库SQL语言类型(DQL.DML.DDL.DCL)

    1.SQL语言 SQL(Structure Query Language)语言是数据库的核心语言. SQL是一个标准的数据库语言, 是面向集合的描述性非过程化语言. 它功能强,效率高,简单易学易维护. ...

  7. html基础 表单标签 input系列 以及优化方法

    场景:在网页中显示手机用户信息的表单效果. 如:登录页.注册页标签名:input 用法是通过改变type属性值,来展示不同效果 1.1 html 代码 <!--placeholder 提示符又叫 ...

  8. k8s env、configmap、secret外部数据加载配置

    K8s提供了多种外部数据注入容器的方式,今天我们主要学习环境变量.ConfigMap以及Secret的使用和配置. 环境变量 在docker项目中,对一个容器添加环境变量可以在容器创建时通过-e EN ...

  9. IdentityServer4 综合应用实战系列 （一）登录

    这篇文章主要说登录,这里抛开IdentityServer4的各种模式,这里只说登录 我们要分别实现 4中登录方式来说明,  IdentityServer4本地登陆 . Windows账户登录(本地的电 ...

  10. Django_测试板块（六）

    本文初略的记录了Django测试板块相关信息,详情请阅官方文档:https://docs.djangoproject.com/zh-hans/3.1/topics/testing/ 开始写我们的第一个 ...