jQuery ajax的提交
Posted 平安亮子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的提交的主要内容，如果未能解决你的问题，请参考以下文章