jQuery学习总结(三)
2024-10-08 04:53:02
这篇文章讲的是jQuery里的ajax发送data的三种方式,利用ajax发送数据的好处是把数据发送到了servlet后,当前页面不进行跳转。
jQuery的里的ajax发送data的方式主要有三种,分别是json数组,url拼接和表单的序列化serialize,这里要配合servlet一起。
第一种:url拼接(下面内容顺序:jsp代码,servlet代码,实验图片)
jsp代码,命名:”a.jsp”。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var myClick=function(){
var mySuccess=function(result){
alert(result);
}
var myError=function(XMLHttpRequest,textstatus){
if(XMLHttpRequest.status==404){
alert("找不到页面404错误");
}
else if(XMLHttpRequest.status==500){
alert("服务器异常500错误");
}else{
alert("服务器出现异常,请稍后重试");
}
}
$.ajax({
//把数据发到哪里去
url:'A?content='+$("#content").val(),
//要调用servlet里的方法(doget或dopost)
type:'GET',
//返回的数据类型(可以没有)
dataType:'text',
//成功的话,调用函数
success:mySuccess,
//失败调用函数
error:myError,
//如果相应时间超过三秒就会出错
timeout:3000 });
}
$("#abc").click(myClick); }); </script>
<title>Insert title here</title>
</head>
<body>
<input id="content" type="text" value="This is content">
<input id="abc" type="button" value="click">
</body>
</html>
servlet代码,取名:A.java
package web; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/A")
public class A extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String content = request.getParameter("content");
System.out.println(content);
PrintWriter out =response.getWriter();
//下面注释了的代码是让servlet停三秒在做出反应
/** try {
Thread.sleep(3000);
} catch (InterruptedException e) {
System.out.println("代码出错"+e.getMessage());
}*/
out.println(content); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
效果图
第二方式:json
jsp代码(servlet代码可以用上面的),取名b.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var myClick=function(){
var myData={ content : $("#content").val() }
var mySuccess=function(result){
alert(result);
}
var myError=function(XMLHttpRequest,textstatus){
if(XMLHttpRequest.status==404){
alert("找不到页面404错误");
}
else if(XMLHttpRequest.status==500){
alert("服务器异常500错误");
}else{
alert("服务器出现异常,请稍后重试");
}
}
$.ajax({
//把数据发到哪里去
url:'A',
//要调用servlet里的方法(doget或dopost)
type:'GET',
//数据
data:myData,
//返回的数据类型(可以没有)
dataType:'text',
//成功的话,调用函数
success:mySuccess,
//失败调用函数
error:myError,
//如果相应时间超过三秒就会出错
timeout:3000 });
}
$("#abc").click(myClick); }); </script>
<title>Insert title here</title>
</head>
<body>
<input id="content" type="text" value="This is content">
<input id="abc" type="button" value="click">
</body>
</html>
效果图
第三种:serialize序列化
jsp代码(servlet用上面的),取名:c.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var myClick=function(){
var myData=$("#content").serialize();
var mySuccess=function(result){
alert(result);
}
var myError=function(XMLHttpRequest,textstatus){
if(XMLHttpRequest.status==404){
alert("找不到页面404错误");
}
else if(XMLHttpRequest.status==500){
alert("服务器异常500错误");
}else{
alert("服务器出现异常,请稍后重试");
}
}
$.ajax({
//把数据发到哪里去
url:'A',
//要调用servlet里的方法(doget或dopost)
type:'GET',
//数据
data:myData,
//返回的数据类型(可以没有)
dataType:'text',
//成功的话,调用函数
success:mySuccess,
//失败调用函数
error:myError,
//如果相应时间超过三秒就会出错
timeout:3000 });
}
$("#abc").click(myClick); }); </script>
<title>Insert title here</title>
</head>
<body>
<input id="content" type="text" value="This is content">
<input id="abc" type="button" value="click">
</body>
</html>
效果图
第一部分: http://www.cnblogs.com/memory9770/p/7236407.html
第二部分: http://www.cnblogs.com/memory9770/p/7237447.html
第三部分: http://www.cnblogs.com/memory9770/p/7237448.html
最新文章
- 标签语义化之常用HTML标签
- Storm可靠性实例解析——ack机制
- oracle中number类型的数据使用as string 得到的值为null
- Helios与Katana的区别
- 22Mybatis_订单商品数据模型_多对多查询以及对多对多查询的总结
- 每天一个linux命令(19):Linux 目录结构
- BZOJ-1834 网络扩容 最小费用最大流+最大流+乱搞
- C语言之复杂指针详解
- 【转】你真的了解iOS代理设计模式吗?
- 关于C#泛型列表List<;T>;的基本用法总结
- hexo博客的优化与配置——加入统计代码
- 解决Android下元素滑动问题
- Effective Java 第三版——11. 重写equals方法时同时也要重写hashcode方法
- 【MySQL】MySQL内连接,左连接,右连接查询
- Mysql中Count函数的正确使用
- MySQL(3)---MySQL优化
- 2015-10-12 jQuery4
- 193 Valid Phone Numbers
- BZOJ1026_windy数_KEY
- 《Effective Java》读书笔记一(创建与销毁对象)
热门文章
- 【Docker】Jenkins的安装与更新
- apk混淆打包和反编译(转)
- Linux 2>;&;1的意思
- ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set
- vc++简单的vector动态数组实现
- $POJ1742\ Coins$ 多重背包+贪心
- ApacheHudi常见问题汇总
- AES Base64 C++加密工具
- Educational Codeforces Round 53 (Rated for Div. 2) (前五题题解)
- spring boot集成spring-boot-starter-mail邮件功能