由于是使用jquery的 所以别忘记导入jq

下面是jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"

         pageEncoding="UTF-8"%>

<!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>

    <script src="js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        function ajaxFun(){

            $.ajax({

                type: "POST",                            //传数据的方式

                url: "user",                             //servlet地址

                data: $('#form').serialize(),            //传的数据  form表单 里面的数据

                success: function(result){               //传数据成功之后的操作   result是servlet传过来的数据  这个函数对result进行处理，让它显示在 输入框中

                    $("#results").val(result);           //找到输入框 并且将result的值 传进去

                }

            });

        }

    </script>

</head>

<body>

<H1 align="center">请输入两个字符串</H1>

<div align="center">

    <form id="form">

        first:<input type="text" name="first" id="first">

        second:<input type="text" name="second" id="second">
　　　　　//点击按钮的时候触发属性

        <button type="button" onclick="ajaxFun()">button</button> //提交 按钮

    </form>

    <input type="text" id="results">

    // 用来 显示 result

</div>

</body>

</html>

　　然后是 servlet 文件

　　

package com.java.servlet;

import java.io.IOException;

import java.io.PrintWriter;

/**

 * Ajax 训练

 * */

public class UserServlet extends javax.servlet.http.HttpServlet {

    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        this.doGet(request,response);

    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");

        request.setCharacterEncoding("utf-8");

        response.setCharacterEncoding("UTF-8");

        PrintWriter out = response.getWriter();

        String first = request.getParameter("first");           //从前端获取数据first

        String second = request.getParameter("second");         //从前端获取数据second

        String result=first+second;

        System.out.println(result);                                      //用于测试 ，判断是否成功获取到数据；

        out.println(result);                                                 //将数据传到前端

    }

}

　　

使用jquery 的ajax 与 Java servlet的交互的更多相关文章

  1. 关于使用jquery的Ajax结合java的Servlet后台判定用户名是否存在

    关于把AJAX加入到注册登录demo中去 2018年3月10日 19:21:23 第一次来SUBWAY真切地打代码. 这次的西红柿汤还是挺好喝的. index.jsp: <%@ page con ...

  2. jquery的ajax向后台servlet传递json类型的多维数组

    后台运行结果:                                                                                      前台运行结果: ...

  3. jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法

    最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...

  4. Servlet处理（jQuery）Ajax请求

    1. jQuery     jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...

  5. 当使用servlet输出json时，浏览器端jquery的ajax遇到parse error的问题

    在使用jquery的ajax进行请求发送并由服务端的servlet返回json格式的数据内容时,假设输出内容没有正确设置,会遇到client浏览器报告parse error的问题.这个问题的解决仅仅须 ...

  6. Struts2 使用jQuery实现Ajax

    在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...

  7. JS原生Ajax&Jquery的Ajax技术&Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

  8. jQuery 第六章 jQuery在Ajax应用

    1.本章目标 ajax 2.ajax 异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互 用户体验好 地图,前台验证,表单提交,修改,查询等等 原生的js和ajax packag ...

  9. ajax 与jsp servlet

    jQuery的Ajax实现异步传输List.Map_GOOD 分类: JAVA WEB前端2013-08-29 18:35 6296人阅读 评论(0) 收藏 举报 javajquerylistjson ...

随机推荐

  1. 新装的主机没有ifconfig,route等命令，怎么查找对应的安装包

    公司最近有台新装的主机,主机上一些常用的命令都没有,比如说ifconfig,route等命令. 没有这些命令主机很难工作,所以我们就需要把他安装上 第一种方法:是你需要知道对应的是那个包 比如说ifc ...

  2. mac上php版本切换

    目标:Mac 环境下完成 php 版本之间的切换 在本地开发中很多时候我们需要多个版本的 php 开发环境.在公司中习惯用自己电脑开发的伙伴们,常常因为公司线上环境被迫更换php版本.但有不想降低自己 ...

  3. 印钞机 V1.0（量化选基总结）

    今年的元旦,在家把之前手工的选基方法完全程序化了.这是我的"印钞机" V1.0. 为什么叫印钞机,详细情况可见下文及最后的总结. 量化选基成果 我的主要基金投资方法其实就是量化选基 ...

  4. 七个人生工具：SWOT、PDCA、6W2H、SMART、WBS、时间管理、二八原则

    本文为转载 心理导读:今天为大家分享几个实用的工具,来源网络. SWOT分析法 Strengths:优势 Weaknesses:劣势 Opportunities:机会 Threats:威胁 意义:帮您 ...

  5. node七-required、缓存

    学会查API,远比会几个API更重要. 核心模块意义 -如果只是在服务器运行javascript代码,并没有多大意义,因为无法实现任何功能>读写文件.访问网络 -Node的用处在于它本身还提供可 ...

  6. RabbitMQ 安装 Your installed version of Erlang (6.2) is too old. Please install a more recent version.

    windows安装RabbitMQ时在安装完Erlang语言开发包后,再安装RabbitMQ时报错: Your installed version of Erlang (6.2) is too old ...

  7. 架构之ELK日志分析系统

    ELK多种架构及优劣 既然要谈ELK在大数据运维系统中的应用,那么ELK架构就不得不谈.本章节引出四种笔者曾经用过的ELK架构,并讨论各种架构所适合的场景和优劣供大家参考. 先大致介绍ELK组件.EL ...

  8. [CVPR2015] Is object localization for free? – Weakly-supervised learning with convolutional neural networks论文笔记

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #323333 } p. ...

  9. 在mac OX10.11.6上安装MySQL

    一.之前失败情况 官网下载dmg文件安装.源码安装,下过5.6  5.7  8.0 版本,都可以安装成功,但是在电脑设置界面无法启动,每次点启动输入密码后,均闪一下绿色然后变红色,既然不能界面启动,那 ...

  10. ruby klb.rb irb

    1.字符串格式化 Python "%s=%s" % (k, v) 在阅读 Python 字符串格式化的时候,视线先看到字符串的 %s 字样,但是不知道这指的是什么,然后看后面的变量 ...