大家好，今天铁柱兄给大家带一段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提交数据给后端的更多相关文章

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

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

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

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

  3. 扩展auth_user字段、BBS需求分析、创建BBS数据库、注册页面搭建与用户头像展示及Ajax提交数据

    昨日内容回顾 csrf跨站请求 1. SQL注入 2. xss攻击 3. csrf跨站请求 4. 密码加密(加盐) '''django中默认有一个中间件来验证csrf''' # 只针对post请求才验 ...

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

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

  5. ThinkPHP中ajax提交数据

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

  6. ajax提交数据

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

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

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

  8. JQuery ajax提交表单及表单验证

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

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

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

随机推荐

  1. Spring Cloud ---- 服务消费与负载均衡（Rest + Ribbon ）

    上一篇主要写了基于Eurake的服务的注册,主要就是创建注册中心,创建服务者,将服务者注册到注册中心,完成服务的暴露.这一篇主要写服务的消费与服务消费的负载均衡. 服务的调用方式有两种,Rest + ...

  2. Mybatis总结之如何自动生成数据库表结构

    一般情况下,用Mybatis的时候是先设计表结构再进行实体类以及映射文件编写的,特别是用代码生成器的时候. 但有时候不想用代码生成器,也不想定义表结构,那怎么办? 这个时候就会想到Hibernate, ...

  3. java中的时区转换

    目录 java中的时区转换 一.时区的说明 二.时间的表示 三.时间戳 四.Date类和时间戳 五.java中的时区转换 java中的时区转换 一.时区的说明 地球表面按经线从东到西,被划成一个个区域 ...

  4. API 接口开发规范

    整体规范建议采用RESTful 方式来实施. 协议 API与用户的通信协议,总是使用HTTPs协议,确保交互数据的传输安全. 域名 应该尽量将API部署在专用域名之下.https://api.exam ...

  5. 小白学 Python（17）：基础数据类型（函数）（下）

    人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...

  6. [考试反思]1109csp-s模拟测试106：撞词

    (撞哈希了用了模拟测试28的词,所以这次就叫撞词吧) 蓝色的0... 蓝色的0... 都该联赛了还能CE呢... 考试结束前15分钟左右,期望得分300 然后对拍发现T2伪了写了一个能拿90分的垃圾随 ...

  7. [考试反思]1015csp-s模拟测试75：混乱

    赶上一套极其傻逼的题(是傻逼,不是简单) T1超级卡精 T2模拟(输出卡"0.0"与"-0.0"不开spj),而且数据诡异乱打就能A(貌似给这道题的时间越长分越 ...

  8. [考试反思]1014csp-s模拟测试73：侵蚀

    嗯...还是没有改变那个现状 依旧只是打满了暴力,虽说T2打的的确比暴力好很多,但是因为出题人没有设分所以和暴力等同. 离上面的分差还是大的很,下面还是追的很紧 而且进几场的排名也是连续下滑... 虽 ...

  9. NOIP模拟测试12

    T1 斐波那契 一道找规律题,被我做成了贼难的题. 观察图片可知x=f[i-1]+j.(j为x的父亲)且j<=f[i-1],然后就二分找父亲没了. #include<bits/stdc++ ...

  10. NOIP模拟测试9

    又考崩了咕咕咕... T1:随    好题标记 前置芝士: 原根:质数P的原根g满足1<=rt<P,且rt的1次方,2次方…(P-1)次方在模P意义下可以取遍1到(P-1)的所有整数.   ...