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. QT creator编程C++第一步，说“Hello world!”

    这个学期选了计算机学院的<数字图像处理>,正好和我的图像识别项目有所关联,老师说不能用MATLAB来做,这让我一个没学过C++的孩纸欲哭无泪. 只好求助计算机学院的大佬,自学C++. 大佬 ...

  2. Spring AOP 通过order来指定顺序

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt398 Spring中的事务是通过aop来实现的,当我们自己写aop拦截的时候 ...

  3. ROS学习记录（二）————使用smartcar进行仿真(用.xacro文件来运行rviz)

    我发现一个学习ROS系统的好网站: 创客智造http://www.ncnynl.com/ 这里面关于ROS的各个方面都有很详细的介绍. 这周,不,上周我对整个ROS是绝望的,我用一个一个下午的时间在敲 ...

  4. node简单配置一台服务器

    要想使用nodeJS来搭建服务器,首先需要一个必备的条件:node必须安装,建议为4.0版本及以上: 在node中,为我们封装了好多类,搭建服务器需要的一个类是"http"类. 用 ...

  5. 01-TypeScript概述

    本篇文章向大家介绍新的TypeScript客户端脚本语言,主要涉及两个方面,一是传统JavaScript语言的弱点,二是TypeScript语言的优势. 一.JavaScript的弱点 1.弱类型,缺 ...

  6. 03-TypeScript中的强类型

    在js中不能定义类型,而是根据赋值后,js运行时推断类型.在ts中支持强类型,强类型包括string.number(浮点型,不是整型).boolean.any(任意类型).Array<T> ...

  7. Ubuntu操作系统下安装JDK、tomcat、mysql

    1.先从安装虚拟机开始 01.首先打开VMware虚拟机.     02.然后,进入home主页,点击"create a New Virtual Machine"一栏,就会弹出一个 ...

  8. 如何设置Cookie 的值为中文的内容

    默认情况下,cookie的值是不允许中文内容的.可以借助于java.net.URLEncoder先对中文字符串进行编码,将编码后的结果设为cookie值.当程序要读取cookie值时,先读取,然后使用 ...

  9. 201521123063 《java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  10. 201521123038 《Java程序设计》 第十一周学习总结

    201521123038 <Java程序设计> 第十一周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多 ...