大家好，今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学。

初学javaweb的同学前端提交数据基本上都是用form表单提交，这玩意儿反正我是觉得不太好玩。而JavaScript ajax写一大堆，看着都头痛。jquery ajax简单易懂容易学。

废话不多说，上教程~

新建一个Web项目，在\WebContent下新建一个index.jsp

新建之后不用慌，默认的jsp编码得改一下，我这边统一改成UTF-8：

搞定之后我们直接引入jquery的js文件，因为我们村通网络了，我就不想直接下载js了：

直接引入js的网上路径：

简简单单，明明白白，写两个输入框：

pageEncoding="UTF-8"%>

Insert title here

点我提交//点击事件

其实这里我还是想直接截图的，但是害怕你们喷我“啥作者，只会发图片”。但是这里确实没啥好复制的。废话不多说，咱们继续。

写完这里之后，先不急着写js，咱们先把后台怎么接收的给写上。哈哈哈，又要发图片了

package com.tiezhu.action;

import java.io.IOException;

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(name="LoginServlet",urlPatterns="/login")

public class LoginServlet extends HttpServlet{

/**

*

*/

private static final long serialVersionUID = 1L;

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

// TODO Auto-generated method stub

super.doGet(req, resp);

}

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

}

}

好了，搞定java类。咱们回到jsp去，快快，跟上队伍~

pageEncoding="UTF-8"%>

Insert title here

点我提交

function btnConfirm(){//a标签中的点击事件

var userName=$("#userName").val();//通过id获取输入框中用户输入的值

var password=$("#password").val();

$.ajax({

type : 'post',

url : '${pageContext.request.contextPath}/login',

//这里的/login对应LoginServlet类中注解的urlPatterns="/login"

data:{'userName':userName,'password':password},

traditional : true,

async : false,

dataType: 'json',

success : function(data){//成功的事件

alert("铁柱兄真帅");

},

error : function(data){//失败的事件

alert("你个衰仔！");

}

});

}

现在基本上就ok啦。ajax里的各种动作我就不一一解说啦，百度里面一大把哦。其实也不用知道是啥意思，能搞定用就好了。

现在我们再去LoginServlet类里去写接收

package com.tiezhu.action;

import java.io.IOException;

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(name="LoginServlet",urlPatterns="/login")

public class LoginServlet extends HttpServlet{

/**

*

*/

private static final long serialVersionUID = 1L;

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

// TODO Auto-generated method stub

super.doGet(req, resp);

}

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

String userName=req.getParameter("userName");

String password=req.getParameter("password");

System.out.println("接收到前端传来的数据：userName="+userName+"password="+password);

}

}

这样基本上没啥毛病了，我们把项目跑起来试一下

OK，后端能正常接收到前端传来的值了。(那为啥还说我是个衰仔？)

因为后端只接收了值，但是没告诉ajax现在是啥情况。我们得返回点东西给ajax，告诉它我们这边一切正常。

resp.getWriter().write("666");随便返回点东西给前端，只要有返回，ajax就知道你还活着了。

再跑一次~

好了。本次就到这里啦。有什么不懂的欢迎评论区讨论~

继上篇-jquery ajax提交 本篇用ajax提交的数据去数据库查询

上篇讲到如何用jquery ajax提交数据至后台,后台接收并返回给ajax.https://www.cnblogs.com/tiezhuxiong/p/11943328.html 今天我们把数据传到 ...

Form 表单用 Ajax 提交数据并用 jQuery Validate 验证

表单填写需要验证可用插件 jQuery Validate 提交数据使用 Ajax 可操控性得到提到 注意:请自行引入 jQuery 和 jQuery Validate HTML 代码

jquery ajax提交表单数据的两种方式

http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

ThinkPHP中ajax提交数据

最近在做项目时遇到了一些需要从页面用ajax提交数据到后台的操作,无奈本人技术有限,网上苦寻,研究了一下ajax和thinkPHP的结合,黄天不负苦心人,终于搞定了. 闲话少叙,进入正题:我需要从页面 ...

ajax提交数据

ajax提交数据 注意:获取值可以从方法参数传过来 也可以通过jquery获取对应标签的值:同时参数要与请求的动作方法的参数一致,否则值无法映射 发送 ajax (get 方式简写)请求      注 ...

form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例

很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...

JQuery ajax提交表单及表单验证

JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

第一百五十九节，封装库--JavaScript，表单序列化结合ajax提交数据

封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...

Jquery Ajax 提交json数据

在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...

随机推荐

tcpdump抓取HTTP包

tcpdump抓取HTTP包 tcpdump -XvvennSs 0 -i eth0 tcp[20:2]=0x4745 or tcp[20:2]=0x4854 0x4745为"GET&quo ...

通过yeelink平台监控树莓派CPU温度变化

通过yeelink平台监控树莓派温度,是很多派友入门第一课.作为一名刚入手树莓派裸机不久的新手,在没有其他硬件支持的情况,通过yeelink平台来监控树莓派CPU温度变化,也是我学习树莓派.学习智能硬 ...

Windows系统安装Oracle 11g客户端

一.下载 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html以下网址来源此官方下载页网 ...

Modelsim使用笔记(一个完成工程的仿真)

这学期在玩Altera的板子,不不, 现在应该叫intel PSG.在QuartusII13.0上老喜欢用modelsim_ae做仿真,小工程用起来也方便,但是我做IIC配置摄像头的时序仿真时,就显得 ...

菜鸟玩云计算之十八：Hadoop 2.5.0 HA 集群安装第1章

菜鸟玩云计算之十八:Hadoop 2.5.0 HA 集群安装第1章 cheungmine, 2014-10-25 0 引言 在生产环境上安装Hadoop高可用集群一直是一个需要极度耐心和体力的细致工作 ...

20, CSS 定义选择器

1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何 ...

Kettle系列:Pentaho DI (Kettle) 下载地址

Kettle 8 已经发布, 下载地址还不太好找, 这里记录一下: 注: 所有大型软件升级都需要谨慎,  尤其是大版本的第一个小版本都不推荐在生产环境使用. github 总是有最新版 https:/ ...

版本控制系统 git 之基础讲解

很久之前就用起了git,但都是用在从github上clone项目上,或者hexo的博客提交上,直到前段时间加入了学校的技术中心,需要用git进行文件管理,才去了解了下git的具体使用方式. 什么是gi ...

Asp .Net core 2 学习笔记(2) —— 中间件

这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文章 ...

如何在 Ubuntu 16.04，15.10，14.04 中安装 GIMP 2.8.16(类似于PS软件)

GIMP 图像编辑器 2.8.16 版本在其20岁生日时发布了.下面是如何安装或升级 GIMP 在 Ubuntu 16.04, Ubuntu 15.10, Ubuntu 14.04, Ubuntu 1 ...