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. Spring Aop 应用实例与设计浅析

    0.代码概述 代码说明:第一章中的代码为了突出模块化拆分的必要性,所以db采用了真实操作.下面代码中dao层使用了打印日志模拟插入db的方法,方便所有人运行demo. 1.项目代码地址:https:/ ...

  2. snowflake主键生成策略

    1.snowflake简介 在分布式系统中,我们需要各种各样的ID,既然是ID那么必然是要保证全局唯一,除此之外,不同当业务还需要不同的特性,比如像并发巨大的业务要求ID生成效率高,吞吐大:比如某些银 ...

  3. js 四舍五入函数 toFixed（），里面的参数 就是保留小数的位数。

    js 四舍五入函数 toFixed(),里面的参数 就是保留小数的位数. <script language="javascript"> document.write(& ...

  4. ADO.NET中SQL Server数据库连接池

    连接到数据库服务器通常由几个需要很长时间的步骤组成. 必须建立物理通道(例如套接字或命名管道),必须与服务器进行初次握手,必须分析连接字符串信息,必须由服务器对连接进行身份验证,必须运行检查以便在当前 ...

  5. log4j与log4j.properties的配置

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt233 摘要: 一.配置步骤 1.  在应用程序中使用log4j 2.  把l ...

  6. eclipse+git

    最近朋友都推荐使用github管理自己的项目,而且免费用户可以有5个仓库,恰好我也想了解下git,借此机会学习一下.github官方指南使用独立第三方git工具来进行版本控制,并不借助于eclipse ...

  7. Sudoku Generator

    Sudoku 算法 标签(空格分隔): 软工实践 设想:通过第一行,来生成2, 3行的排列,再通过1 - 3 生成4 - 6排列. 2 3 行的生成由上一行生成 公式为$grid[i][j] = gr ...

  8. 201521123061 《Java程序设计》第七周学习总结

    201521123061 <Java程序设计>第七周学习总结 1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 贴上源 ...

  9. Java 第八周总结

    1. 本周学习总结 2. 书面作业 1.List中指定元素的删除 1.1 实验总结 list中可以通过list.get(i)来获取具体第几个的元素的值,再通过compareTo来对比 通过in.has ...

  10. 201521123022 《Java程序设计》 第8周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 Q1.List中指定元素的删除(题目4-1) Q1.1 实验总结 本题要求的是编写covnert ...