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. Python Celery队列

    Celery队列简介: Celery 是一个 基于python开发的分布式异步消息任务队列,通过它可以轻松的实现任务的异步处理, 如果你的业务场景中需要用到异步任务,就可以考虑使用celery. 使用 ...

  2. [转]Java7中的ForkJoin并发框架初探（上）——需求背景和设计原理

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp83 这篇我们来简要了解一下JavaSE7中提供的一个新特性 -- For ...

  3. Java缓存类的实际应用场景

    不要着迷于技术,应把注意力放到问题上. 一个普通的后台管理系统,一定会有参数配置.参数配置数据表和其他的数据表是不同的,它的操作基本都是查的操作.参数配置的这些数据信息是贯穿在整个项目中,那么把他们放 ...

  4. SNS团队Beta阶段第一次站立会议（2017.05.22）

    1.立会照片 2.每个人的工作 成员任务分工: 成员 今天已完成的工作 明天计划完成的工作 罗于婕 修改之前的文档 界面优化  龚晓婷 修改之前的文档 界面优化 林仕庄 修复不能发音bug  界面图标 ...

  5. Java计算器1.0版

    此版本只是设计了页面,还没有实现事件监听   代码: package com.niit.javagui; import java.awt.Button; import java.awt.FlowLay ...

  6. 【Alpha】Daily Scrum Meeting——Day7

    站立式会议照片 1.本次会议为第7次Meeting会议: 2.本次会议在上午大课间09:40,在禹州楼召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 燃尽图 每个人的工作分配 成 ...

  7. sudoku--设想

    在查阅了一些资料和自己动手写一写后,找到一种可行的解法. 第一步 首先将9x9的数独方格分成九份3x3的九宫格,如下图 B1 B2 B3 B4 B5 B6 B7 B8 B9 而后在左上角的B1上随机生 ...

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

    1. 本周学习总结 2. 书面作业 本次作业题集集合 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 remove函数中,开始我的写法是 for(int i=0;i<list.s ...

  9. 201521123013 《Java程序设计》第6周学习总结

    1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 Q1.clone方法 1.1 Object ...

  10. 201521123010 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 作业参考文件下载 ① 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java ...