jquery ajax提交数据给后端
大家好，今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学。
初学javaweb的同学前端提交数据基本上都是用form表单提交，这玩意儿反正我是觉得不太好玩。而JavaScript ajax写一大堆，看着都头痛。jquery ajax简单易懂容易学。
废话不多说，上教程~
新建一个Web项目，在\WebContent下新建一个index.jsp
新建之后不用慌，默认的jsp编码得改一下，我这边统一改成UTF-8：
搞定之后我们直接引入jquery的js文件，因为我们村通网络了，我就不想直接下载js了：
直接引入js的网上路径：<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
简简单单，明明白白，写两个输入框：
<%@ 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">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<input type="text" id="userName"/>
<input type="text" id="password"/>
<a onclick="btnConfirm()">点我提交</a>//点击事件
</body>
</html>
其实这里我还是想直接截图的，但是害怕你们喷我“啥作者，只会发图片”。但是这里确实没啥好复制的。废话不多说，咱们继续。
写完这里之后，先不急着写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去，快快，跟上队伍~
<%@ 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">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<input type="text" id="userName"/>
<input type="text" id="password"/>
<a onclick="btnConfirm()">点我提交</a>
<script type="text/javascript"> 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("你个衰仔！");
}
});
}
</script>
</body>
</html>
现在基本上就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提交数据给后端的更多相关文章
- 继上篇-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 代码 <form ...
- 扩展auth_user字段、BBS需求分析、创建BBS数据库、注册页面搭建与用户头像展示及Ajax提交数据
昨日内容回顾 csrf跨站请求 1. SQL注入 2. xss攻击 3. csrf跨站请求 4. 密码加密(加盐) '''django中默认有一个中间件来验证csrf''' # 只针对post请求才验 ...
- 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 ...
随机推荐
- 线性回归 python 代码实现
本代码参考自:https://github.com/lawlite19/MachineLearning_Python#%E4%B8%80%E7%BA%BF%E6%80%A7%E5%9B%9E%E5%B ...
- CasperJS 前端功能测试
CasperJS 是一个开源的导航脚本和测试组件.它提供实用的高级函数.方法和语法糖,可完成以下任务: 对浏览导航步骤的定义和排序 填写和提交表单 点击和跟踪链接 获取页面快照(或者页面中的某部分) ...
- （二）与animation播放对比
animation播放动画 1.播放默认动画 直接将动画拖入动画对象animation组件的animation变量中,然后加入如下代码既可以播放(此处采用toggle控制动画的播放) public A ...
- Java连接MySQL简单步骤及常见问题解析
这篇文章跟读者们介绍Java语言如何连接到MySQL数据库相关操作,及FAQ(Frequently Asked Questions)介绍. 选择工具和准备数据集 IDE:Eclipse 数据库:使用的 ...
- vw vh 的概念
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- Go调用cpp类
CGO是C语言和Go语言之间的桥梁,所以GO是没有办法直接使用CPP的类的. 我们可以通过增加一族C语言函数接口作为CPP类和CGO之前的桥梁的,这样 就可以实现C和Go之间的互联. my_buffe ...
- 【XSY2525】Maze 2017多校
Description 考虑一个 N×M 的网格,每个网格要么是空的,要么是障碍物.整个网格四周都是墙壁(即第1行和第n行,第1列和第m列都是墙壁),墙壁有且仅有两处开口,分别代表起点和终点.起点总是 ...
- oop面向对象知识总结 静态成员和友元
第十一章 静态成员和友元 11.1 静态成员 1.C++类当中的静态数据成员仍借用保留字static,但是与之前的静态全局变量,静态局部变量以及静态函数没有关系. 2.静态数据成员不占用具体对象的数据 ...
- Kubernetes4-web管理界面
一.简介 1.环境 环境还是前面的环境 2.Kubernetes Dashboard web界面 kubernetes dashboard (仪表盘)是一个将通用的基于web的监控和操作界面加入kub ...
- PTA刷题记录（1）
团队天梯赛-------(2)分值:20 题目要求:你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状” ...