JQuery（24）_JQuery 的 Ajax

最新推荐文章于 2024-01-26 17:35:16 发布
最新推荐文章于 2024-01-26 17:35:16 发布
阅读量3.6k 收藏
点赞数
分类专栏： JQuery（更新完） 文章标签： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36260974/article/details/103532601
版权

本系列博客汇总在这里：JQuery 汇总

JQuery 的 Ajax

JSON 工具包

点我下载

一、返回值类型为 Text

1、前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!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="${path }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">

function ajaxInvoke()
{
	var uname = $("#username").val();
	var opt = 
	{
		//请求方式
		type:'post',
		//请求的地址
		url:'${path}/login',
		/* 
		//方式一（推荐）
		data:
		{
			username:uname//username=uname
		}, 
		*/
		//方式二
		data:"username="+uname,
		//返回值的类型，一般使用两种，text，json
		dataType:'text',
		success:function(responseText)
		{
			//ajax调用成功后的回调方法
			//alert(responseText);
			
			//jQuery把字符串解析成json对象（方式一）
			//var jsonObj = window.eval("("+responseText+")");
			
			//jQuery把字符串解析成json对象（方式二）（推荐）
			var jsonObj = $.parseJSON(responseText);
			alert(jsonObj.id+ "  "+jsonObj.name +"   "+jsonObj.age);
		},
		error:function()
		{
			//调用失败进入的方法，如果404或者后台报异常就会走入error
			alert("系统错误");
		}
	};
	$.ajax(opt);
}
</script>
</head>
<body>
<input id="username" name="username" type="text">
<input type="button" value="点击" onclick="ajaxInvoke()">
</body>
</html>

2、后台 servlet

package cn.wyx.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class MyServlet extends HttpServlet
{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		// 获得ajax发送的数据
		String name = req.getParameter("username");
				
		Person p  = new Person();
		p.setId(1);
		p.setAge(20);
		p.setName(name);
		
		//注意处理中文处理
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=UTF-8");
		
		//自己组装 json（较麻烦，不推荐）
		//String result ="{\"id\":"+p.getId()+",\"name\":\""+p.getName()+"\",\"age\":"+p.getAge()+"}";
		//resp.getWriter().print(result);
		
		//使用工具包（建议）
		JSONObject obj = JSONObject.fromObject(p);
		resp.getWriter().print(obj.toString());
	}
}

3、web.xml 配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	
	<servlet>
		<servlet-name>servlet1</servlet-name>
		<servlet-class>cn.wyx.servlet.MyServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>servlet1</servlet-name>
		<url-pattern>/login</url-pattern>
	</servlet-mapping>
</web-app>

4、person 类

package cn.wyx.servlet;

public class Person
{
	private Integer id;

	private String name;

	private Integer age;

	public Integer getId()
	{
		return id;
	}

	public void setId(Integer id)
	{
		this.id = id;
	}

	public String getName()
	{
		return name;
	}

	public void setName(String name)
	{
		this.name = name;
	}

	public Integer getAge()
	{
		return age;
	}

	public void setAge(Integer age)
	{
		this.age = age;
	}
}

5、效果演示

在这里插入图片描述

二、返回值类型为 Json

1、前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!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="${path }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">

function ajaxInvoke()
{
	var uname = $("#username").val();
	var opt = 
	{
		//请求方式
		type:'post',
		//请求的地址
		url:'${path}/login',
		data:
		{
			//username=uname
			username:uname
		},
		//返回值的类型，一般使用两种，text，json
		dataType:'json',
		success:function(responseJSON)
		{
			//ajax调用成功后的回调方法
			//如果dataType是json那么要求后台一定要返回JSONObject或者JSONArray对象,这个后台的json对象会直接转换成js中的json
			//alert(responseJSON.id+ "  "+responseJSON.name +"   "+responseJSON.age);
			for(var i = 0; i < responseJSON.length; i++)
			{
				alert(responseJSON[i].id + "  "+ responseJSON[i].name + "  "+responseJSON[i].age);
			}
		},
		error:function()
		{
			alert("系统错误");
		}
	};
	$.ajax(opt);
}
</script>
</head>
<body>
<input id="username" name="username" type="text">
<input type="button" value="点击" onclick="ajaxInvoke()">
</body>
</html>

2、后台 servlet

package cn.wyx.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class MyServlet1 extends HttpServlet
{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		// 获得ajax发送的数据
		String name = req.getParameter("username");
		
		List<Person> pList = new ArrayList<Person>();
		for (int i = 0; i < 5; i++)
		{
			Person p  = new Person();
			p.setId(1);
			p.setAge(20);
			p.setName(name + i);
			pList.add(p);
		}

		//注意处理中文处理
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=UTF-8");
		
		JSONArray ja = JSONArray.fromObject(pList);
		resp.getWriter().print(ja);
	}
}

3、web.xml 配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	
	<servlet>
		<servlet-name>servlet1</servlet-name>
		<servlet-class>cn.wyx.servlet.MyServlet1</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>servlet1</servlet-name>
		<url-pattern>/login</url-pattern>
	</servlet-mapping>
</web-app>

4、person 类

package cn.wyx.servlet;

public class Person
{
	private Integer id;

	private String name;

	private Integer age;

	public Integer getId()
	{
		return id;
	}

	public void setId(Integer id)
	{
		this.id = id;
	}

	public String getName()
	{
		return name;
	}

	public void setName(String name)
	{
		this.name = name;
	}

	public Integer getAge()
	{
		return age;
	}

	public void setAge(Integer age)
	{
		this.age = age;
	}
}

5、效果演示

在这里插入图片描述

三、关于 AJAX　的同步异步问题

1、前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!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="${path }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">

function ajaxInvoke()
{
	var uname = $("#username").val();	
	$.ajax
	({
		//请求方式
		type:'post',
		//请求的地址
		url:'${path}/login',
		//同步的ajax,会等着回调函数执行完毕再往下执行
		//async:false,
		data:
		{
			//username=uname
			username:uname
		},
		//返回值的类型，一般使用两种，text，json
		dataType:'json',
		success:function(responseJSON)
		{
			//ajax调用成功后的回调方法
			alert(1);
			//如果dataType是json那么要求后台一定要返回JSONObject或者JSONArray对象,这个后台的json对象会直接转换成js中的json
			//alert(responseJSON.id+ "  "+responseJSON.name +"   "+responseJSON.age);
			for(var i = 0; i < responseJSON.length; i++)
			{
				alert(responseJSON[i].id + "  "+ responseJSON[i].name + "  "+responseJSON[i].age);
			}
		},
		error:function()
		{
			alert("系统错误");
		}
	});
	//默认情况下ajax是异步的，所以程序不会等着回调函数执行完毕采取执行
	alert(2);
}

function ajax()
{
	var result = "";
	$.ajax
	({
		//同步的ajax,会等着回调函数执行完毕再往下执行，如果没有async:false, ajax() 这个方法只会返回空串""
		async:false,
		success:function(respText)
		{
			result = respText;
		}
	});
	return result;
}
</script>
</head>
<body>
<input id="username" name="username" type="text">
<input type="button" value="点击" onclick="ajaxInvoke()">
</body>
</html>

2、后台 servlet

package cn.wyx.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class MyServlet1 extends HttpServlet
{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		// 获得ajax发送的数据
		String name = req.getParameter("username");
		
		List<Person> pList = new ArrayList<Person>();
		for (int i = 0; i < 5; i++)
		{
			Person p  = new Person();
			p.setId(1);
			p.setAge(20);
			p.setName(name + i);
			pList.add(p);
		}

		//注意处理中文处理
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=UTF-8");
		
		JSONArray ja = JSONArray.fromObject(pList);
		resp.getWriter().print(ja);
	}
}

3、web.xml 配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	
	<servlet>
		<servlet-name>servlet1</servlet-name>
		<servlet-class>cn.wyx.servlet.MyServlet1</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>servlet1</servlet-name>
		<url-pattern>/login</url-pattern>
	</servlet-mapping>
</web-app>

4、person 类

package cn.wyx.servlet;

public class Person
{
	private Integer id;

	private String name;

	private Integer age;

	public Integer getId()
	{
		return id;
	}

	public void setId(Integer id)
	{
		this.id = id;
	}

	public String getName()
	{
		return name;
	}

	public void setName(String name)
	{
		this.name = name;
	}

	public Integer getAge()
	{
		return age;
	}

	public void setAge(Integer age)
	{
		this.age = age;
	}
}

5、效果演示

（1）、同步效果

在这里插入图片描述
在这里插入图片描述

（2）、异步效果

在这里插入图片描述
在这里插入图片描述

如有错误，欢迎指正！

魏宇轩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery-Ajax
王欢的博客
05-02 476
1.安装web环境1.首先在nodejs中，执行npm install -g http-server，安装server 2.在工程目录下运行http-server -p 80 3. 在浏览器中访问127.0.0.12.jQuery对Ajax进行了封装jQuery对Ajax进行了封装 1.在jQuery中$.ajax()方法属于最底层的方法 2.第二层是load()、$.get()、$
AJAX(二）jQuery
超级程序诞生的博客
01-05 1780
我们将该链接引入get.html文件里面：全局的 setTimeout()方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。Get.htmleq() 方法将匹配元素集缩减值指定 index 上的一个。语法$.get(URLdatadatastatusxhrdataType。
JQuery 入门24条
yuanlanjun
07-18 115
JQuery意义：html负责页面内容，css负责页面样式，javascript负责页面行为 1，页面加载完成之后，执行代码，可简化 2，获取页面制定元素节点，奇数和偶数行匹配：：even，：odd 3，给控件添加相应的事件代码:load，click，keyup，mouseover，mouseout,change，scroll，resize 4，获得节点的CSS属性和内容：val，ht...
24-JQuery
weixin_51339105的博客
05-10 1248
1.JQuery 官网：http://jquery.com js+query jquery是一个快速的轻量的功能丰富的js库，满足了各种浏览器的兼容问题； 功能：元素的查找与遍历、元素的操作、CSS样式的操作、元素事件、JS动画 解决web2.0之后的交互问题； 使用感受：简单简洁、链式调用、读写一体； Jquery使用： 使用思路：查找+操作 DOM查询 $(参数) 调用 $ 函数进行查询，参数是一个字符串，CSS选择器 jQuery 对象 使用jQuery方法获取的对象，不能直接调用JS原生方法 自
24.jQuery插件
最新发布
Kylincsg的博客
01-26 616
jQuery插件的使用、制作
jQuery学习手册（24）
czzyw的博客
05-10 663
on(type,callback)：注册事件 注册多个相同类型事件，后注册的不会覆盖先注册的 注册多个不同类型事件，后注册的不会覆盖先注册的 off(type,callback)：移出事件 每日一句 对于最有潜力的领航人风浪总是格外的汹涌。 ...
24-jQuery事件绑定
小伟
04-11 208
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>24-jQuery事件绑定</title> <script src="js/jquery-1.12.4.js"></script> ...
js.rar_.net_JS AJAX_jquery_jquery .net_增删
09-20
在IT行业中，JavaScript（简称JS）和AJAX（异步JavaScript和XML）是网页开发中的核心技术，而jQuery作为JS的一个库，极大地简化了DOM操作、事件处理和动画设计。.NET框架则是微软推出的用于构建高性能、可信赖的Web...
CSS_AJAX.rar_ajax css_ajax 网页_html+css+jquery_jquery
09-20
在网页设计领域，CSS、AJAX 和 jQuery 是三个不可或缺的技术元素，它们共同为现代网页带来了交互性和动态性。本文将详细探讨这些技术及其在网页设计中的应用。 首先，CSS（层叠样式表）是用于控制网页外观和布局的...
jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq
09-30
jQuery通过提供一套丰富的API，使得开发者可以快速实现常见的网页操作，如选择元素、添加事件监听器、执行AJAX请求等，而无需编写大量复杂的原生JavaScript代码。 在标签中，"jquery_3.4.1.js"和"jquery-3.4.1"再次...
richengbiao.rar_ richengbiao_jquery java_jquery 日程_jsp jquery_日程
09-21
在本资源"richengbiao.rar"中，包含了一个基于jQuery和Java技术实现的日程管理应用实例，这对于学习AJAX以及Web开发的人员来说是一个很好的参考资料。这个项目着重展示了如何利用jQuery库与JSP（JavaServer Pages）...
lcms.rar_ajax jquery_asp+jquery+access_充话费asp
09-24
2.强大后台管理功能，使用jQuery+AJAX结构，操作友好、界面更酷、兼容性更好、速度更快、管理更容易。 3.集成内容管理、产品管理、资源管理、访客留言、友情链接、会员管理、站内信息功能，完全可以应付绝大多数的...
JQuery(24)——RadioButton操作
qq_34573534的博客
09-16 2013
1、为什么特殊：因为只有Radio才是以一组为一个单位。 2、取得RadioButton的选中值： $("input[name=gender]:checked").val() <input id="Radio2" checked="checked" name="gender" type="radio" value="男" />男 <inpu...
JQuery学习24篇(动画)
程宇寒
01-10 3178
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery学习24篇(动画)</title> <link rel="stylesheet" type="text/css" href="inputAndDiv.css"> &l...
24.jquery_ajax_02
best_berg的博客
08-01 268
2.4 JQuery核心函数  2.4.1     jQuery(回调函数)  简化过程： jQuery(document).ready(callback); 简化为： $(document).ready(callback)。 简化为： $(callback); 2.4.2        jQuery(表达式) 此函数的作用是传入不同的expression （表达式），以不同的方式获取页面...
24-jQuery的事件绑定
yangyalun的博客
10-08 191
 jQuery绑定事件的方法有两种。 1.比如：$(".div1").click(function(){})，效率高，但有些事件不能添加 2.比如：$(".div1").on("click",function(){})，效率低，所有事件都能够添加 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &a
jQuery原理——24——根据DOM操作相关方法（empty,remove,html,text）编写自己的jQuery框架
x1037490413的博客
12-09 3966
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
jQuery 入门教程 24 jQuery UI Autocomplete示例 二
bcghgfr的博客
11-07 371
jQuery 入门教程 24 jQuery UI Autocomplete示例 二
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值