Jquery.ajax使用

最新推荐文章于 2024-03-13 07:00:00 发布
最新推荐文章于 2024-03-13 07:00:00 发布
阅读量94 收藏
点赞数
分类专栏： js 文章标签： ajax jquery
原文链接：https://blog.csdn.net/
版权

文章目录

01.$.ajax方法基本使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn').on('click', function () {
			$.ajax({
				// 请求方式
				type: 'post',
				// 请求地址
				url: '/base',
				// 请求成功以后函数被调用
				success: function (response) {
					// response为服务器端返回的数据
					// 方法内部会自动将json字符串转换为json对象
					console.log(response);
				},
				// 请求失败以后函数被调用
				error: function (xhr) {
					console.log(xhr)
				}
			})
		});
	</script>
</body>
</html>

02.$.ajax方法传递请求参数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		var params = {name: 'wangwu', age: 300}
		$('#btn').on('click', function () {
			$.ajax({
				// 请求方式
				type: 'post',
				// 请求地址
				url: '/user',
				// 向服务器端发送的请求参数
				// name=zhangsan&age=100
				// data: {
				// 	name: 'zhangsan',
				// 	age: 100
				// },
				data: JSON.stringify(params),
				// 指定参数的格式类型
				contentType: 'application/json',
				// 请求成功以后函数被调用
				success: function (response) {
					// response为服务器端返回的数据
					// 方法内部会自动将json字符串转换为json对象
					console.log(response);
				}
			})
		});
	</script>
</body>
</html>

03.beforeSend方法的说明

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn').on('click', function () {
			$.ajax({
				// 请求方式
				type: 'post',
				// 请求地址
				url: '/user',
				// 在请求发送之前调用
				beforeSend: function () {
					alert('请求不会被发送')
					// 请求不会被发送
					return false;
				},
				// 请求成功以后函数被调用
				success: function (response) {
					// response为服务器端返回的数据
					// 方法内部会自动将json字符串转换为json对象
					console.log(response);
				}
			})
		});
	</script>
</body>
</html>

04.serialize方法说明

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>serialize方法说明</title>
</head>
<body>
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="submit" value="提交">
	</form>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		$('#form').on('submit', function () {
			// 将表单内容拼接成字符串类型的参数
			// var params = $('#form').serialize();
			// console.log(params)
			serializeObject($(this));
			return false;
		});

		// 将表单中用户输入的内容转换为对象类型
		function serializeObject (obj) {
			// 处理结果对象
			var result = {};
			// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
			var params = obj.serializeArray();

			// 循环数组 将数组转换为对象类型
			$.each(params, function (index, value) {
				result[value.name] = value.value;
			})
			// 将处理的结果返回到函数外部
			return result;
		}

	</script>
</body>
</html>

05.$.ajax方法发送json请求

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>

		function fn (response) {
			console.log(response)
		}

		$('#btn').on('click', function () {
			$.ajax({
				url: '/jsonp',
				// 向服务器端传递函数名字的参数名称
				jsonp: 'cb',
				jsonpCallback: 'fn',
				// 代表现在要发送的是jsonp请求
				dataType: 'jsonp'/*,
				success: function (response) {
					console.log(response)
				}*/
			})
		});
	</script>
</body>
</html>

06. $ .get、$ .post方法的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn').on('click', function () {
			// $.get('/base', 'name=zhangsan&age=30', function (response) {
			// 	console.log(response)
			// })
			
			$.post('/base', function (response) {
				console.log(response)
			})
		});
	</script>
</body>
</html>

07.restful风格的api

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		// 获取用户列表信息
		$.ajax({
			type: 'get',
			url: '/users',
			success: function (response) {
				console.log(response)
			}
		})

		// 获取id为1的用户信息
		$.ajax({
			type: 'get',
			url: '/users/1',
			success: function (response) {
				console.log(response)
			}
		})

		// 获取id为1的用户信息
		$.ajax({
			type: 'delete',
			url: '/users/10',
			success: function (response) {
				console.log(response)
			}
		})

		// 获取id为1的用户信息
		$.ajax({
			type: 'put',
			url: '/users/10',
			success: function (response) {
				console.log(response)
			}
		})
	</script>
</body>
</html>

08.xml介绍

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<div id="container"></div>
	<script type="text/javascript">
		var btn = document.getElementById('btn');
		var container = document.getElementById('container');

		btn.onclick = function () {
			var xhr = new XMLHttpRequest();
			xhr.open('get', '/xml');
			xhr.send();
			xhr.onload = function () {
				// xhr.responseXML 获取服务器端返回的xml数据
				var xmlDocument = xhr.responseXML;
				var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
				container.innerHTML = title;
			}
		}
	</script>
</body>
</html>

小小的服务

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 导入mongoose模块
const mongoose = require('mongoose');
// 导入bodyParser模块
const bodyParser = require('body-parser');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 处理post请求参数
app.use(bodyParser.json()); 
// app.use(bodyParser.urlencoded({extended: false}));

// 数据库连接
mongoose.connect('mongodb://itcast:itcast@localhost:27017/todo', {useNewUrlParser: true })

app.get('/base', (req, res) => {
	res.send({
		name: 'zhangsan',
		age: 30
	})
});

app.post('/base', (req, res) => {
	res.status(400).send({
		name: 'zhaoliu',
		age: 35
	})
});

app.get('/user', (req, res) => {
	res.send(req.query);
});

app.post('/user', (req, res) => {
	res.send(req.body)
});

app.get('/jsonp', (req, res) => {
	const cb = req.query.cb
	const data = cb+"({name: 'zhaoliu'})"
	res.send(data);
	// res.jsonp({
	// 	name: 'lisi',
	// 	age:50
	// })
});

// 导入todo路由案例
const todoRouter = require('./route/todo')
// 当客户端的请求路径以/todo开头时
app.use('/todo', todoRouter);

// 获取用户列表信息
app.get('/users', (req, res) => {
	res.send('当前是获取用户列表信息的路由');
});

// 获取某一个用户具体信息的路由
app.get('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在获取id为${id}用户信息`);
});

// 删除某一个用户
app.delete('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在删除id为${id}用户信息`);
});

// 修改某一个用户的信息
app.put('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在修改id为${id}用户信息`);
});

app.get('/xml', (req, res) => {
	res.header('content-type', 'text/xml');
	res.send('<message><title>消息标题</title><content>消息内容</content></message>')
});


// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
星光..
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery.Ajax()的data参数类型详解
10-19
在jQuery的Ajax方法中，`data`参数是一个非常关键的部分，它用于传递要发送到服务器的数据。本篇文章将深入探讨`data`参数的不同类型及其使用方法。 首先，`data`参数可以接受多种类型的数据，包括JavaScript对象、...
jquery.unobtrusive-ajax.min.js
07-06
Ajax.BeginForm 提交，需要引用此文件才会执行OnSuccess
Ajax在jQuery中的用法
qq_43537721的博客
06-18 189
Ajax在jQuery中的用法，RESTful与XML基础。
Jquery中ajax的使用
l4432321的博客
01-09 3437
声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 Jquery包装的ajax操作如下: $get $post 操作都是一样的 就是名字不一样而已! Url 就是你的访问的地址 Data 就是你表单的数据 Function 回调函数 就是等你请求完毕把返回的数据给这个函数! DataTypoe 数据
Jquery Ajax的使用
小码蚁
04-23 1568
Ajax概述Ajax就是通过 HTTP 请求加载远程数据。通常用于定制一些http请求来灵活的完成前端与后端的数据交互需求。注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。JQuery Ajax之所以能发送http请求， 是调用了html中的XMLHttpRequest对象(原生ajax)。另外还有一种跨域Ajax。这个会在最后介绍到 。Ajax的一般格式$.ajax({ ...
jquery中的ajax使用
qq_46023503的博客
10-05 2108
jquery中的ajax使用
jQuery中ajax的使用
嗯很喜欢你
09-23 2118
java 下常见的json类库都有Gson，JSON_lib 和 jackson等，但 jackson相对来说比较高效，在项目中主要也是使用jackson进行json和Java对象转换； 那么什么是jackson呢  ？   1）：Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象    和xml文档，同样也可以将json、xml转换成Java...
jquery.ajax之beforeSend方法使用介绍
10-25
主要介绍了jquery.ajax之beforeSend方法使用介绍,beforeSend方法用于在向服务器发送请求前添加一些处理函数,需要的朋友可以参考下
jquery.ajaxupload.js
11-16
AjaxUpload.js 就是一个js文件，里面封装了上传文件的代码，其实就是一个js的框架，利用它来更简单的实现文件的上传
MVC+jQuery.Ajax异步实现增删改查和分页
10-22
主要为大家详细介绍了MVC结合jQuery.Ajax异步实现增删改查和分页的相关资料，感兴趣的小伙伴们可以参考一下
JQuery使用Ajax
Ccc_bk的博客
07-22 564
jquery ajax的常用配置
jquery ajax方法使用
mengtianqq的博客
03-26 5660
 jquery ajax方法使用先引入： &lt;script type="text/javascript" src="${ctx}/common/js/jquery.js"&gt;&lt;/script&gt; 再使用ajax方法，具体用法如下： $.ajax({ type : "post",//向后台请求的方式，有post，get两种方法 url : WWWROOT + ...
JQuery的ajax用法
l2535460824的博客
07-03 173
&lt;script type="text/javascript" src="js/jquery-1.12.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ $("#username").blur( function() { $.ajax({ t
「jQuery系列」jQuery中Ajax的运用
最新发布
日常笔记/总结/系列知识梳理
03-13 2501
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
jQuery中ajax的使用（最详细）
热门推荐
小屁鸿的博客
08-02 3万+
jQuery中ajax的使用1.jQuery中ajax的基本使用2.jQuery中ajax的回调事件3.jQuery中ajax中的高度封装函数4.jQuery中ajax的全局事件 1.jQuery中ajax的基本使用 2.jQuery中ajax的回调事件 3.jQuery中ajax中的高度封装函数 4.jQuery中ajax的全局事件 ...
jQuery - Ajax的使用详解(主要简单试做了两个案例)
m0_52336378的博客
06-26 1026
首先学习前提出几个问题进行对Ajax的了解什么是Ajax？Ajax怎样进行使用Ajax的功能？同步与异步的区别？前端向后端发起请求的方式有哪些？Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下，能够更新部分⽹⻚的技术。
jQuery Ajax请求的基本用法
西瓜游侠的博客
07-18 1141
在这里记录一下 jQuery的Ajax基本用法， 以便以后查阅！ GET 请求 // 页面加载完毕执行的回调函数 $(document).ready(function () { // 获取请求参数 var username = $('#username').val(); var password = $('password').val(); // 执行a...
jQuery.ajax
03-09
使用jQuery.ajax方法可以发送各种类型的HTTP请求，包括GET、POST、PUT、DELETE等。它的语法如下： ```javascript $.ajax({ url: "请求的URL", method: "请求方法", data: "请求参数", success: function...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值