讲给后台程序员看的前端系列教程(62)——jQuery的AJAX实现

于 2019-10-23 10:22:01 发布
阅读量786 收藏 4
点赞数 2
分类专栏： 讲给后台程序员看的前端系列教程 文章标签： jQuery AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfdfhl/article/details/102694942
版权

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

  • 本文原创作者：谷哥的小弟
  • 作者博客地址：http://blog.csdn.net/lfdfhl

概述

之前，我们介绍过JavaScript原生AJAX技术；在此，我们学习jQuery中对于AJAX的实现。

在jQuery中AJAX常见使用方式如下：

jQuery.ajax(url,[settings])
简写为$.ajax(url,[settings])，该方式可处理GET和POST请求

参数如下：

  • url：请求URL
  • settings：请求设置

jQuery.get(url, [data], [callback], [type], [contentType], [dataType])
简写为$.get(url, [data], [callback], [type], [contentType], [dataType])，该方式用于处理GET请求

参数如下：

  • url：请求URL
  • data：请求参数
  • callback：回调函数
  • type: 请求方式
  • contentType：告知服务器客户端发送的数据的格式
  • dataType：告知服务端客户端期望收到的数据为何种格式

jQuery.post(url, [data], [callback], [type], [contentType], [dataType]))
简写为$.post(url, [data], [callback], [type]), [contentType], [dataType])，该方式用于处理POST请求

参数如下：

  • url：请求URL
  • data：请求参数
  • callback：回调函数
  • type: 请求方式
  • contentType：告知服务器客户端发送的数据的格式
  • dataType：告知服务端客户端期望收到的数据为何种格式

AJAX使用示例

在此，以示例形式介绍jQuery中AJAX的使用。

AJAX示例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AJAX</title>
		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			//利用$.ajax()进行Get请求
			$("#ajaxGetButton").click(function() {
				var url = "http://httpbin.org/get";
				var params = {
					"username": "lucy",
					"nickname": "pipi"
				};
				$.ajax({
					"url": url,
					"data": params,
					"type": "GET",
					"success": function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.args.username);
						console.log(data.args.nickname);
					},
					"error": function(data) {
						console.log(data);
					},
					"dataType": "json"
				});

			});


			//利用$.ajax()进行Post请求
			$("#ajaxPostButton").click(function() {
				var url = "http://httpbin.org/post";
				var params = {
					"username": "lucy",
					"nickname": "pipi"
				};
				$.ajax({
					"url": url,
					"data": params,
					"type": "POST",
					"success": function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.form.username);
						console.log(data.form.nickname);
					},
					"error": function(data) {
						console.log(data);
					},
					"dataType": "json"
				});

			});

			//利用$.get()发送get请求
			$("#getButton").click(function() {
				var url = "http://httpbin.org/get";
				var params = {
					"username": "lucy",
					"nickname": "pipi"
				};
				$.get(
					url,
					params,
					function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.args.username);
						console.log(data.args.nickname);
					},
					"json"
				);
			});
			
			//利用$.ajax()提交表单
			function firstSubmit() {
				var url = "http://httpbin.org/post";
				$.ajax({
					"url": url,
					"data": $("#userform1").serialize(),
					"type": "POST",
					"success": function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.form.username);
						console.log(data.form.userage);
					},
					"error": function(data) {
						console.log(data);
					},
					"dataType": "json"
				});
				return false;
			}
			
			//利用$.post()提交表单
			function secondSubmit() {
				var url = "http://httpbin.org/post";
				var params = $("#userform2").serialize();
				console.log(params);
				$.post(
					url,
					params,
					function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.form.username);
						console.log(data.form.userage);
					},
					"json"
				);
				return false;
			}
			
		</script>
	</head>
	<body>
		<h2 style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<button id="ajaxGetButton">利用$.ajax()进行Get请求</button>
		<br /><br />
		<button id="ajaxPostButton">利用$.ajax()进行Post请求</button>
		<br /><br />
		<button id="getButton">利用$.get()发送get请求</button>
		<br /><br />
		<form method="post" id="userform1" onsubmit="return firstSubmit()">
			姓名: <input type="text" id="name" name="username" style="width: 150px" />
			<br /><br />
			年龄: <input type="text" id="age" name="userage" style="width: 150px" />
			<br /><br />
			<input type="submit" value="利用$.ajax()提交表单" />
		</form>
		<br /><br />
		<form method="post" id="userform2" onsubmit="return secondSubmit()">
			姓名: <input type="text" id="name" name="username" style="width: 150px" />
			<br /><br />
			年龄: <input type="text" id="age" name="userage" style="width: 150px" />
			<br /><br />
			<input type="submit" value="利用$.post()提交表单" />
		</form>
	</body>
</html>

在这里插入图片描述

AJAX示例2

项目结构
在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AJAX</title>
		<script type="text/javascript" src="jQuery/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$(function() {
				//利用$.ajax()请求数据
				$("#ajaxButton").click(function() {
					var url = "/AJAX04/AJAXServlet";
					var params = {
						"username": "lucy",
						"password": "123"
					};
					$.ajax({
						"url": url,
						"data": params,
						"type": "POST",
						"success": function(data) {
							console.log(data);
							console.log(data.message);
						},
						"error": function(data) {
							console.log(data);
							console.log(data.message);
						},
						"dataType": "json"
					});

				});

				//利用$.get()发送get请求
				$("#getButton").click(function() {
					var url = "/AJAX04/AJAXServlet";
					var params = {
						"username": "lucy",
						"password": "123"
					};
					$.get(
						url,
						params,
						function(data) {
							console.log(data);
							console.log(data.message);
						},
						"json"
					);
				});

				//利用$.post()发送post请求
				$("#postButton").click(function() {
					var url = "/AJAX04/AJAXServlet";
					var params = {
						"username": "lucy",
						"password": "123"
					};
					$.post(
						url,
						params,
						function(data) {
							console.log(data);
							console.log(data.message);
						},
						"json"
					);
				});

			});
		</script>
	</head>
	<body>
		<h2 style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<button id="ajaxButton">利用$.ajax()发送请求</button>
		<button id="getButton">利用$.get()发送get请求</button>
		<button id="postButton">利用$.post()发送post请求</button>
	</body>
</html>

在这里插入图片描述
AJAXServlet

package cn.com;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 本文作者：谷哥的小弟 
 * 博客地址：http://blog.csdn.net/lfdfhl
 * 
 * 在jQuery中使用ajax
 */
public class AJAXServlet extends HttpServlet {
	
	private static final long serialVersionUID = -4452579660869800468L;

	@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String method = request.getMethod();
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println("请求方式：" + method);
		System.out.println("请求参数：" +"username="+username+",password="+password);
		if("lucy".equals(username)&&"123".equals(password)) {
			//设置响应数据
			String jsonData = "{\"message\":\"success\"}";
			//设置响应格式
			response.setContentType("application/json;charset=UTF-8");
			//返回响应内容
			response.getWriter().print(jsonData);
		}else {
			//设置响应数据
			String jsonData = "{\"message\":\"error\"}";
			//设置响应格式
			response.setContentType("application/json;charset=UTF-8");
			//返回响应内容
			response.getWriter().print(jsonData);
		}
		
    }
    
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	this.doGet(request, response);
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>AJAX04</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
    <servlet-name>AJAXServlet</servlet-name>
    <servlet-class>cn.com.AJAXServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>AJAXServlet</servlet-name>
    <url-pattern>/AJAXServlet</url-pattern>
  </servlet-mapping>
  
  
</web-app>
谷哥的小弟
关注
专栏目录
程序员web前端视频教程（文档+代码+视频）.rar
05-29
本教程资源包"程序员web前端视频教程（文档+代码+视频）.rar"为初学者提供了一个全面的学习路径，旨在帮助他们掌握这个领域的基础知识并逐步进阶。 HTML（HyperText Markup Language）是构建网页的基础，它是所有...
SpringMVC+Jquery实现Ajax功能
01-19
一、什么是Ajax? Ajax:异步的JavaScript和Json（这里XML改为了Json)； 作用：用于完成网页局部刷新功能...jQuery框架：是一个程序员使用比较多的JS框架，功能较为强大。 理念：写的更少，做的更多 优点：1.兼容各种浏
前端技术——代码片段 给更多程序员补充前端开发的知识和小技巧
04-02
前端技术——代码片段 给更多程序员补充前端开发的知识和小技巧 提升你的开发效率的工具 掌握它，可以让开发更顺畅
基于AJAX/JQUERY、Bootstrap框架技术实现“一带一路”项目的响应式前端网站 改改数据改改图片就可以直接使用
最新发布
06-26
使用AJAX/JQUERY技术中的页面制作、选择器、DOM操作、事件处理实现页面数据展示 使用Ajax技术实现与服务端数据交互与操作 使用DIV+CSS+jQuery技术实现页面优化 使用Bootstrap框架技术的页面布局、栅格、实现页面数据...
基于AJAX/JQUERY、Bootstrap框架技术实现“党史学习教育”项目的响应式前端网站 改改数据改改图片就可以直接使用
06-26
使用AJAX/JQUERY技术中的页面制作、选择器、DOM操作、事件处理实现页面数据展示 使用Ajax技术实现与服务端数据交互与操作 使用DIV+CSS+jQuery技术实现页面优化 使用Bootstrap框架技术的页面布局、栅格、实现页面数据...
讲给后台程序员看的前端系列教程(38)——事件处理
热门推荐
谷哥的小弟
09-12 1万+
事件被看作是JavaScript与网页之间交互的桥梁，当事件发生时，可以通过JavaScript 代码执行相关的操作。例如，用户可以通过鼠标拖曳登录框、改变登录框的显示位置、单击鼠标、双击鼠标等等。其实，在软件开发领域，几乎所有的GUI编程都会涉及到事件机制。比如，我们在Android中非常熟悉的单击，触摸，滑动，双击，长按等等都属于事件的范畴。今天我们就来学习JavaScript中事件处理机制。
讲给后台程序员看的前端系列教程(26)——CSS综合练习
谷哥的小弟
09-09 1430
在本节中，我们对CSS知识进行综合练习
讲给后台程序员看的前端系列教程(01)——HTML5概述
谷哥的小弟
09-04 1296
大概两年前我写了《讲给Android程序员看的前端和后台教程》；在该专栏中介绍了前端开发基本技能，例如：HTML5、CSS、JavaScript等等。随着技术的更新和迭代，我决定在此基础之上重写此系列教程以供工作和学习之需。本系列教程概述如下：主要内容为前端基础知识和常用框架、每篇博客均附示例源码及运行效果截图、本系列教程免费，欢迎转载
讲给后台程序员看的前端系列教程(02)——HTML5标签(1)
谷哥的小弟
09-04 1201
HTML不是程序设计语言，而是一种标记语言，它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站，就必须对HTML语言有所了解。客观地讲：HTML标签没有多少逻辑性而言，为了大家更好的理解和记忆，我们对这些标签进行分门别类的讲解，主要分为：
讲给后台程序员看的前端系列教程(34)——对象
谷哥的小弟
09-10 1167
在看到"对象"这两个字的时候，很多人会立马会联想到Java中的类、对象、继承、封装、多态…打住，打住，不要继续往下想了。在这或许要抛弃一下我们的惯性思维了。JavaScript并不是完全纯粹的面向对象，或者说它和大家熟知的Java中的面向对象不完全一样。在JavaScript中所有东西，比如：字符串、数字、数组、日期，甚至函数都是对象。
讲给后台程序员看的前端系列教程(39)——正则表达式
谷哥的小弟
09-15 1062
正则表达式(Regular Expression,简称RegExp)是一种描述字符串结构的语法规则，是一个特定的文本模式，用于验证各种字符串是否匹配这个特征，进而实现文本查找、替换、截取内容等操作。正则表达式的应用范围非常之广泛，最初是由Unix普及开来的，后来在广泛运用于Scala 、PHP、C# 、Java、C++ 、Objective-c、Perl 、Swift、VBScript 、Javascript、Ruby以及Python等等。
讲给后台程序员看的前端系列教程(30)——运算符与表达式
谷哥的小弟
09-09 995
JavaScript提供了丰富的运算符，比如：算数运算符，赋值运算符，比较运算符，逻辑运算符等等。在此，介绍JavaScript中常用的运算符和表达式。
讲给后台程序员看的前端系列教程(43)——JSON数据格式及其解析
谷哥的小弟
09-18 977
SON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。SON 比 XML 更小、更快，更易解析，所以从Web API和服务端编程语言到NoSQL数据库和客户端框架
讲给后台程序员看的前端系列教程(11)——HTML综合练习
谷哥的小弟
09-04 925
HTML5常用标签及布局综合练习
讲给后台程序员看的前端系列教程(36)——BOM
谷哥的小弟
09-11 907
在实际开发中，JavaScript经常需要操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。为此，浏览器提供了一系列内置对象，统称为浏览器对象；各内置对象之间按照层次组织起来的模型统称为浏览器对象模型Browser Object Model简称BOM，其架构如下图所示：
讲给后台程序员看的前端系列教程(08)——HTML5标签(7)
谷哥的小弟
09-04 855
HTML表单用于搜集用户输入的不同类型的数据并将其上传至服务端。嗯哼，了解完表单的作用，我们就来一起学习表单中最常用的标签。input标签是表单中功能最丰富的标签，以下几种输入元素均可使用input实现。
讲给后台程序员看的前端系列教程(37)——DOM
谷哥的小弟
09-11 849
文档对象模型(Document Object Model，简称DOM)是W3C (World Wide Web Consortium)组织推荐的处理可扩展标志语言的标准编程接口。目前，DOM编程广泛应用于xml、html开发中。对于JavaScript来说，DOM是操作HTML文档的重要手段，开发人员可利用DOM实现对HTML文档内所有元素的获取、访问和设置等操作。在本节教程中，我们将详细介绍DOM编程在html开发中的常见应用。在本节教程中，我们将详细介绍DOM编程在html开发中的常见应用。
讲给后台程序员看的前端系列教程(22)——盒子模型
谷哥的小弟
09-09 848
在网页设计中CSS的盒子模型是一个非常重要的概念。HTML中的每个元素占据一个矩形区域，这块区域就是该元素所占据的盒子。所谓盒子模型就是把HTML页面中的元素视为一个矩形的盒子、一个盛装内容的容器。每个盒子都由以下四部分组成：内容、内边距(padding)、边框(border)、外边距(margin)；详情请参见下图：
讲给后台程序员看的前端系列教程(33)——函数
谷哥的小弟
09-10 838
在JavaScript程序设计中为了使代码更为简洁且能重复使用，通常会把某段实现特定功能的代码封装称为一个函数。在本节教程中，我们来一起学习JavaScript的函数。
jQuery Ajax：简化异步加载与DOM操作的实用教程
jQuery的AJAX功能使得前端开发能够更方便地实现异步数据获取和更新，提高用户体验。理解并熟练运用这些方法，能极大地提升开发效率。对于遇到的特定问题，如跨域问题，开发者需要了解并遵循相应的同源策略或利用CORS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

谷哥的小弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值