前端:
- <!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();
- }
- }
来源: http://www.bubuko.com/infodetail-3345671.html