jQuery ajax的提交
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=" 提交 " 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的提交的更多相关文章
- 防止jquery ajax 重复提交
var requestSent = false; jQuery("#buttonID").click(function() { if(!requestSent) { request ...
- jQuery.form.js jQuery ajax异步提交form
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...
- jQuery Ajax请求提交 后台getParameter接收不到数据
今天遇到的问题,总结一下 jQuery的$ajax({ contentType:"application/json", //发送信息至服务器时内容编码类型. }) 这样的方式提交 ...
- jquery ajax异步提交表单数据
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- jquery ajax beforeSend 提交等待问题
需要使用异步加载async : true 否则不会出现等待效果 $.ajax({ url : $('#form').attr("action"), data: $('#form') ...
- jQuery ajax表单提交实现局部刷新
jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容 ...
- jquery ajax报Uncaught TypeError :Illegal invocation
使用jquery ajax异步提交的时候报Uncaught TypeError :Illegal invocation错误,报错信息如图: 上网查了一下jquery的这个错误,导致这个错误的原因有俩点 ...
- jquery ajax Uncaught TypeError :Illegal invocation 报错
使用jquery ajax异步提交的时候报Uncaught TypeError :Illegal invocation错误,报错如图: 基本上,导致这个错误的原因一般有以下两点: 1.请求类型有误,如 ...
随机推荐
- App测试中 ----------------Android和IOS测试区别
1 . Android长按home键呼出应用列表和切换应用,然后右滑则终止应用:2. 多分辨率测试,Android端20多种,ios较少:3. 手机操作系统,Android较多,ios较少且不能降级, ...
- Redis单机版和集群版的安装和部署
1.单机版的安装 本次使用redis3.0版本.3.0版本主要增加了redis集群功能. 安装的前提条件: 需要安装gcc:yum install gcc-c++ 1.1 安装redis 1.下载re ...
- h5audio标签
因为音频格式有版权,各浏览器使用不同的音频格式. 音频格式兼容性 音频格式 Chrome Firefox IE9 Opera Safari MP3 支持 不支持 支持 不支持 支持 OGG 支持 支持 ...
- Java中ArrayList remove会遇到的坑
前言 平时最常用的莫过于ArrayList和HashMap了,面试的时候也是问答的常客.先不去管容量.负载因子什么的,就是简单的使用也会遇到坑. Remove 元素 经常遇到的一个场景是:遍历list ...
- poj 1679 Prim判断次短路
题意:判断最短路是否唯一. 思路:先prrim一次求出最短路同时记录最短路加入的边: 然后枚举所求边,将其删除再求n-1次prim,判断再次所求得的最短路与第一次求得的次短路的关系. 代码: #inc ...
- Eslint配置
//ESLint 4.5.0,参考了eslint官方以及alloyteam团队配置 module.exports = { parser: 'babel-eslint', parserOptions: ...
- nhibernate教程(4)--条件查询(Criteria Query)
NHibernate之旅(4):探索查询之条件查询(Criteria Query) 2008-10-16 18:20 by 李永京, 44341 阅读, 43 评论, 收藏, 编辑 本节内容 NHi ...
- 看懂c/c++ 函数、指针、数组定义
读懂 函数 + 指针 + 数组 c语言运算符机器优先级,看这里 结合运算符优先级,我们试着读懂函数和指针 优先级简单看 表达式提升():一级优先 函数():二级优先 数组[]:二级优先 指针定义*:三 ...
- 201521123084 《Java程序设计》第5周学习总结
第5周-继承.多态.抽象类与接口 1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中C ...
- 第二次项目冲刺(Beta阶段)5.25
1.提供当天站立式会议照片一张 会议内容: ①检查前一天的任务情况. ②制定新一轮的任务计划. ③对这几日的冲刺进行总结. 2.每个人的工作 (1)工作安排 队员 今日进展 明日安排 王婧 #63(完 ...