一、在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】833. Find And Replace in String 解题报告（Python）

    [LeetCode]833. Find And Replace in String 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu ...

  2. Visible Trees(hdu2841)

    Visible Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  3. WPF自定义界面WindowChrome

    WPF自定义界面WindowChrome 默认WPF的界面其实也还行,就是满足不了日渐增长的需求,界面还是需要有更高的自定义程度,包括标题栏也要能够塞下更多的操作控件. 默认窗口介绍 新建WPF项目, ...

  4. Go语言练习 Rot13

    Go语言练习 Rot13 地址:https://tour.go-zh.org/methods/23 package main import ( "io" "os" ...

  5. Android物联网应用程序开发（智慧园区）—— 登录界面开发

    效果: 布局代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  6. JMeter_请求参数

    在做接口测试时,发送请求的参数有两种格式,一种是Parameters,一种是JSON 一.Jmeter传参 JMeter 传Parameters格式的参数 JMeter 传JSON格式的参数 二.区分 ...

  7. Python_获取全部异常信息

    import traceback try: os.getcwd('exc') except Exception: exc = traceback.format_exc() print(exc)

  8. Linux设置新的服务器登录端口

    root用户登录服务器 22端口修改为22525,22端口也打开,以防新端口设置有问题,登录不上服务器 向防火墙中添加修改的端口 systemctl start firewalld firewall- ...

  9. 遍历hashmap的6种方法

    1. 通过ForEach循环进行遍历 mport java.io.IOException; import java.util.HashMap; import java.util.Map; public ...

  10. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...