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. H5页面中尝试调起APP

    安卓版本5.0以上 IOS版本10.0以上 采用事件触发的方式处理唤醒APP 市面上常见的功能 这种功能现如今应该非常普遍了,淘宝H5,知乎H5等等... 点击后会调起APP或者打开下载页面或者直接进 ...

  2. 第3阶段——内核启动分析之创建si工程和分析stext启动内核函数(4)

    目标: (1)创建Source Insight 工程,方便后面分析如何启动内核的 (2)分析uboot传递参数,链接脚本如何进入stext的  (3) 分析stext函数如何启动内核:  (3.1) ...

  3. 【C++小白成长撸】--（续）单偶数N阶魔方矩阵

    1 /*程序的版权和版本声明部分: **Copyright(c) 2016,电子科技大学本科生 **All rights reserved. **文件名:单偶数N阶魔方矩阵 **程序作用:单偶数N阶魔 ...

  4. bootstrap 表单+按钮+对话框

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 团队作业4——第一次项目冲刺（Alpha版本）2017.4.27

    2017.04.27 天气阴沉 小雨. 时间:上午 9:35 ---10:10分 地点:陆大314实验室 会议内容:每天充分利用好大课间的时间,今天对昨天的的细节问题进行了讨论及方法更正.时间不等人这 ...

  6. Java学习8——类（对象）之间的关系

    (基础语法结束,开始看面向对象) 关联 关联体现的是两个类之间语义级别的一种依赖关系,比如我和我的老师. 继承(一般和特殊) 继承是指一个类继承另外一个类的的功能,并可以增加新的功能,"XX ...

  7. Quartz2.2.x官方教程

    零.Quartz是什么?能干什么? Quartz是一个开源的任务调度框架.基于定时.定期的策略来执行任务是它的核心功能,比如x年x月的每个星期五上午8点到9点,每隔10分钟执行1次.Quartz有3个 ...

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

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 1.List中指定元素的删除(题目4-1) 1.1 实验总结 答:先贴上主要代码: priva ...

  9. 201521123106 《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 Q1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 答 ...

  10. 201521123042 《Java程序设计》第12周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String ...