前端：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <!--引入jquery文件-->

    <script src="js/jquery-3.2.1.js" type="text/javascript"></script>

</head>

<body>

    <div style="margin:100px;height:100px">

        <input>

    </div>

    <script type="text/javascript">

        $("input:eq(0)").on('change',function(){

            //获取input中的值

            var a = $(this).val();

            var user = {"name":a,

                        "age": 18,

                        "tel": "13611111111"

            };

            //将这个值传递到java后台

            $.ajax({                                //通过jquery调用ajax方法，触发ajax请求

                url:'/web10/testAjax1',                //url表示请求会发送到哪个后端地址

                //data:'value='+a,                    //通过data封装参数

                data: user,//通过对象传参

                type:'get',                            //type表示发送到后端的请求类型：Get、Post、Put、Delete等等

                dataType:'text',                    //dataType表示服务端响应数据的类型：HTML、text、json等

                success:function(msg){                //success表示请求发送成功之后的回调函数

                                                    //msg表示服务端发送到前端的数据

                    alert(msg);

                },

                error:function(){                     //error,表示程序调用有误

                    alert('错误');

                }

            });

        });

    </script>

</body>

</html>

后台：

package com.zzb.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/testAjax1")

public class TestAjax1 extends HttpServlet{

    private static final long serialVersionUID = 3377241767636882169L;

    @Override

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

        String name = request.getParameter("name");

        String age = request.getParameter("age");

        String tel = request.getParameter("tel");

        System.out.println("ajaxÇëÇóµ½´ï:"+name+":"+age+":"+tel);

        PrintWriter out = response.getWriter();

        out.write("success:"+name);

        out.close();

    }

}

初始Ajax学习笔记的更多相关文章

  1. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  2. Ajax学习笔记demo

    AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...

  3. 基于PHP的AJAX学习笔记（教程）

    本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...

  4. Ajax学习笔记2之使用Ajax和XML

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using Ajax wit ...

  5. Ajax学习笔记1之第一个Ajax应用程序

    代码 <head> <title>An Ajax demo</title> <script src="../js/jquery-1.4.1.js&q ...

  6. ajax学习笔记1

    ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据 ...

  7. AJAX学习笔记

    AJAX不是一种编程语言,AJAX是一种实现网页异步加载的技术,即不刷新网页也能部分的更新网页的内容.如:提交表单信息,通过ajax可以不刷新页面来使得人们明白如何正确的填写信息,判断填写信息的错误或 ...

  8. Jquery ajax 学习笔记

    本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...

  9. Ajax学习笔记(二)

    二.prototype库具体解释 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" ...

随机推荐

  1. DAY 吐

    今天所学: 一,Linux的文件和目录管理 #1 cd( 变更用户所在目录)直接运行cd会进入root的/root下,后面跟目录名,会进入指定目录下( 后面只能是目录名,不能跟文件名). #2 pwd ...

  2. Elasticsearch基础入门，详情可见官方文档

    索引文档: 对于员工目录,我们将做如下操作: 每个员工索引一个文档,文档包含该员工的所有信息. 每个文档都将是 employee 类型 . 该类型位于 索引 megacorp 内. 该索引保存在我们的 ...

  3. 使用Docker Maven 插件进行镜像的创建以及上传至私服

    1.在进行服务容器化部署的时候,需要将服务以及其运行的环境整个打包做成一个镜像,打包的过程有两种办法,第一种是首选通过maven打成jar包,然后再编写dockerfile,执行docker buil ...

  4. vue 事件中的 .native

    vue组件添加事件@click.native native是什么? .native - 监听组件根元素的原生事件. 主要是给自定义的组件添加原生事件. 官网的解释: 你可能想在某个组件的根元素上监听一 ...

  5. Number of Containers ZOJ - 3175（数论题）

    Problem Description For two integers m and k, k is said to be a container of m if k is divisible by  ...

  6. 初遇PHP（一）

    因为想给自己弄一个微信公众号,顺便提升一下自己,所以有了以下内容,本次学习的最终目标是能用php制作套微信公众号,然后转成Java.为什么要这么麻烦呢,其一是买的资料书是php的,其二是顺水推舟刚好可 ...

  7. （转）关于Android中为什么主线程不会因为Looper.loop()里的死循环卡死？引发的思考，事实可能不是一个 epoll 那么 简单。

    ( 转载请务必标明出处:http://www.cnblogs.com/linguanh/, 本文出自:[林冠宏(指尖下的幽灵)的博客]) 前序 本文将会把一下三个问题阐述清楚以及一个网上的普遍观点的补 ...

  8. Java反射理解（五）-- 方法反射的基本操作

    Java反射理解(五)-- 方法反射的基本操作 方法的反射 1. 如何获取某个方法 方法的名称和方法的参数列表才能唯一决定某个方法 2. 方法反射的操作 method.invoke(对象,参数列表) ...

  9. 树莓派安装使用RXTX

    在RaspberryPi树莓派上使用RXTX(RXTX的源码安装)Linux 编译RXTX(JAVA串口开发)源码 如果为windows系统,则使用rxtx比较简单,到http://fizzed.co ...

  10. spring-cloud 学习一 介绍

    微服务Microservice,跟之相对应的是将功能从开发到交付都打包成一个很大的服务单元,一般称之为Monolith,也称「巨石」架构.微服务实现和实施思路更强调功能单一,服务单元小型化和微型化,倡 ...