1、利用jQuery中的aja提交数据，首先引入jQuery中的文件

2、jquery.form.js下载地址：http://vdisk.weibo.com/s/thY_x31gX0M-p?category_id=0...re

　  jquery-1.7.min.js下载地址：http://vdisk.weibo.com/s/t3rx9pJN0bCcM

3、利用jquery ajax 提交有三种方式

　　（1）$.get()

　　（2）$.post()

　　（3）$.ajax()

4、$.get()提交方式

　　（1）在jsp里创建表单和$.get()　　

　　　　<form id="form-user-add" enctype="multipart/form-data" method="post">
　　　　　　<div>
　　　　　　　　姓名：<input type="text" value="<%= bean.getUsername()%>" name="username" id="username"/> 
　　　　　　</div>
　　　　　　<br>
　　　　　　<div>
　　　　　　　　密码：<input type="text" value="<%= bean.getPassword()%>" name="password" id="password"/> 
　　　　　　　　</div>
　　　　　　<br>
　　　　　　<div>
　　　　　　　　身份：<input type="text" value="<%= bean.getSf()%>" name="sf" id="sf"/> 
　　　　　　</div>
　　　　　　<br>
　　　　　　<div>
　　　　　　　　专业：<input type="text" value="<%= bean.getMajor()%>" name="major" id="major"/> 
　　　　　　</div>
　　　　　　<br>

　　　　　　<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
　　　　　　<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" id="tijiao">
　　　　　　<%--<input type="button" onclick="ajaxGet()" value="$.get()方法提交"/><br/> --%>
　　　　　　</div>
　　　　</form>

　　　　<script type="text/javascript" src="jsa/jquery.js"></script> 
　　　　<script type="text/javascript" src="jsa/jquery.form.js"></script> 
　　　　<script type="text/javascript">
　　　　　　$(function(){
　　　　　　$("#tijiao").click(function(){
　　　　　　　　alert("我是jQuery ajax 表单提交");
　　　　　　　　$.get(
　　　　　　　　　　"/jQueryAjax/userupdate",//url地址 项目名加servlet里xml配置url-pattern的名字
　　　　　　　　　　{
　　　　　　　　　　　　name:$("#username").val(),
　　　　　　　　　　　　password:$("#password").val(),
　　　　　　　　　　　　sf:$("#sf").val(),
　　　　　　　　　　　　major:$("#major").val
　　　　　　　　　　},//键值对
　　　　　　　　　　function(date,statest){
　　　　　　　　　　　　alert("数据："+date+"状态："+statest);

　　　　　　　　　　　　parent.location.href = "login.jsp"；//跳转到login.jsp界面，并把当前界面关闭
　　　　　　　　　　}//回调函数 第一个参数是返回的数值，第二个参数返回状态
　　　　　　　　　);
　　　　　　　});
　　　　　　});
　　　　</script>

　　（2）在wed.xml里进行配置　　

　　　　<servlet>
　　　　　　<servlet-name>userupdate</servlet-name>
　　　　　　<servlet-class>com.zhuoshi.servlet.UserServlet</servlet-class>
　　　　</servlet>
　　　　<servlet-mapping>
　　　　　　<servlet-name>userupdate</servlet-name>
　　　　　　<url-pattern>/userupdate</url-pattern>
　　　　</servlet-mapping>

　　（3）在com.zhuoshi.servlet创建UserServlet

　　　　//获取前端的数据值　　

　　　　String name = request.getParameter("name");
　　　　String password = request.getParameter("password");
　　　　String sf = request.getParameter("sf");
　　　　//String sf1 = URLDecoder.decode(sf,"UTF-8");
　　　　String major = request.getParameter("major");
　　　　int id = Integer.parseInt(request.getParameter("id"));
　　　　System.out.println(id);

　　　　UserBean bean = new UserBean();
　　　　bean.setUsername(name);
　　　　bean.setPassword(password);
　　　　bean.setSf(sf);
　　　　bean.setMajor(major);
　　　　bean.setId(id);

　　　　UserDao dao = new UserDaoImpl();
　　　　int a = dao.updateUser(bean);

　　　　if(a>0){
　　　　　　out.append("修改成功！");
　　　　}

　　　　//返回数据给get里的回调函数（data）

　　　　PrintWriter out = response.getWriter();

　　　　out.append("我是回调函数");

　　　　或

　　　　response.getWriter().append("回调函数！");

5、$.post()提交方式

　　步骤基本与$.get()一样

　　就是把$.get()换成$.post()

6、$.ajax()提交方式

(1)在jsp界面的代码

<script type="text/javascript" src="jQuery/jquery.js"></script>
<script type="text/javascript">
$(function(){
　　$("#tj").click(function(){
　　　　var name = $("#name").val();
　　　　//alert(name);
　　　　$.ajax({
　　　　　　url:"toAjax.do",
　　　　　　type:"post",
　　　　　　dataType:"text",//json
　　　　　　data:{name:name},
　　　　　　success:function(data){
　　　　　　　　alert(data);
　　　　　　},
　　　　　　error:function(){
　　　　　　　　alert("error");
　　　　　　}
　　　　});
　　　});
　　});
</script>

</head>
<body>

　　姓名：<input type="text" name="name" id="name"><br>
　　<input type="button" value="提交" id="tj">

</body>
</html>

 (2)在类里的代码（利用SpingMVC注解）

package com.zhuoshi.controllerZJ;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ToAjax {

　　@RequestMapping("/toAjax.do")
　　public void toAjax(String name,HttpServletResponse response)throws Exception{
　　　　System.out.println("------"+name+"------");
　　　　response.getWriter().println("hello"+"\t"+name);
　　}
}

(3)如果利用servlet提交也一样

ajax需要回调函数 类里用 out.print(); 或 response.getWriter().println();

jQuery ajax的提交的更多相关文章

  1. 防止jquery ajax 重复提交

    var requestSent = false; jQuery("#buttonID").click(function() { if(!requestSent) { request ...

  2. jQuery.form.js jQuery ajax异步提交form

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...

  3. jQuery Ajax请求提交 后台getParameter接收不到数据

    今天遇到的问题,总结一下 jQuery的$ajax({ contentType:"application/json",  //发送信息至服务器时内容编码类型. }) 这样的方式提交 ...

  4. jquery ajax异步提交表单数据

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  5. jquery ajax异步提交表单数据的方法

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  6. jquery ajax beforeSend 提交等待问题

    需要使用异步加载async : true 否则不会出现等待效果 $.ajax({ url : $('#form').attr("action"), data: $('#form') ...

  7. jQuery ajax表单提交实现局部刷新

    jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容 ...

  8. jquery ajax报Uncaught TypeError ：Illegal invocation

    使用jquery ajax异步提交的时候报Uncaught TypeError :Illegal invocation错误,报错信息如图: 上网查了一下jquery的这个错误,导致这个错误的原因有俩点 ...

  9. jquery ajax Uncaught TypeError ：Illegal invocation 报错

    使用jquery ajax异步提交的时候报Uncaught TypeError :Illegal invocation错误,报错如图: 基本上,导致这个错误的原因一般有以下两点: 1.请求类型有误,如 ...

随机推荐

  1. C++ Concept 和Java 接口

    C++ Concept 和Java 接口 Concept及接口 我会用Java写个case来解释什么是C++的Concept.Concept可以理解为接口,它是一种广义的接口.不同于Java的Inte ...

  2. 三分钟读懂TT猫分布式、微服务和集群之路

    针对入门新手的普及,有过大型网站技术架构牛人路过,别耽误浪费了时间,阅读之前,请确保有一定的网络基础,熟练使用Linux,浏览大概需要3-5分钟的时间,结尾有彩蛋. 目录 分布式 微服务 负载均衡集群 ...

  3. Redis集群的相关概念

    1.1 redis-cluster架构图 架构细节: (1)所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2)节点的fail是通过集群中超过半数的节 ...

  4. 错误：Warning: Attempt to present <UIAlertController: 0x7fd192806e20> on <ViewController: 0x7fd1928048d0> whose view is not in the window hierarchy!

    系统:mac OS  10.12 (16A323) Xcod:8.3.3 错误:Warning: Attempt to present <UIAlertController: 0x7fd1928 ...

  5. python怎么导入自定义函数

    python 编程中经常需要调用自己定义的函数,在大型程序中自定义的函数一般会和main函数分开,这么主要讲下在不同文件下定义的函数怎么调用: 首先在有文件夹test_python文件夹下有main. ...

  6. 那些年，我们不懂的却又不得不提的 JAVA异常和异常处理！

    ---恢复内容开始--- 首先,我是个小小的菜鸟,最近突然突发奇想,想研究一下java的异常和异常的处理,稍有些理解,老鸟们莫要嘲笑... 既然要讲异常和异常的处理,我们就要先了解异常,那么,什么是异 ...

  7. JS自定义对象以及相关成绩系统完整案例演示

    [自定义对象] 1.基本概念 ①对象是拥有一系列无无序属性和方法的集合 ②键值对:对象中的数据,用以键值对的形式存在,对象的每个属性和方法,都对应一个键值,以键取值 ③属性:描述对象特征的一系列变量称 ...

  8. 对#ifndef的理解

    由于对#ifndef的用法不太理解,在询问了老师#ifndef的含义以及查找资料后,对#ifndef总结了以下几点: <1> #ifndef是宏定义的一种,是三种预处理功能(宏定义,文件包 ...

  9. 201521123083《Java程序设计》第四周学习总结

    [toc] 1. 本周学习总结 尝试使用思维导图总结有关继承的知识点. 2. 书面作业 1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 在这里 ...

  10. How To:禁用ubuntu全局菜单(global menu)的方法

    刚从windows转过来的新手可用会觉得ubuntu unity下的全局菜单(global menu)用起来很不方便.下边是介绍去除全局菜单的方法 1.打开终端(可以去dash主页里面搜,也可以直接按 ...