jquery_ajax

最新推荐文章于 2024-07-24 16:53:23 发布
最新推荐文章于 2024-07-24 16:53:23 发布
阅读量123 收藏
点赞数
文章标签： ajax js jquery post html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CBXdm/article/details/109357935
版权

jquery_ajax

一、jQuery - AJAX 简介
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二、jQuery - AJAX的常用方法

1.load() 从服务器加载数据，并把返回的数据放置到指定的元素中

语法
$(selector).load(url,data,function(response,status,xhr))

在这里插入图片描述

2.$.ajax() 执行异步 AJAX 请求

定义和用法
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, … })

在这里插入图片描述

3.$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
语法
$.get(URL,data,function(data,status,xhr),dataType)

在这里插入图片描述

4.$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
语法
$(selector).post(URL,data,function(data,status,xhr),dataType)

URL在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery ajax</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
	$(function() {
		//测试load
		$("#but1")
				.click(
						function() {
							$("#div1")
									.load(
											"http://localhost:8585/JqueryAjax/main",
											function(resp, status) {
												if (status == "success") {
													$("div")
															.html(
																	"<table border='1px' width='500px'></table>");
													//将得到的json字符串转换成json对象
													var jsonobj = eval("("
															+ resp + ")");
													$(jsonobj)
															.each(
																	function(
																			index,
																			element) {
																		var tdstring = "<td>"
																				+ element.userid
																				+ "</td><td>"
																				+ element.username
																				+ "</td><td>"
																				+ element.userage
																				+ "</td><td>"
																				+ element.useraddress
																				+ "</td>";
																		//$('<tr></tr>').html(tdstring).appendTo('table');
																		$(
																				"table")
																				.append(
																						$(
																								'<tr></tr>')
																								.html(
																										tdstring));
																	});
												}
											});
						});
		//测试ajax的get请求
		$("#but2").click(
				function() {
					$.ajax({
						url : "http://localhost:8585/JqueryAjax/main",
						type : "GET",
						dataType : "json",
						success : function(resp, status) {
							$("#main1").empty();
							$(resp).each(
									function(index, element) {
										var trstring = "<tr><td>"
												+ element.userid + "</td><td>"
												+ element.username
												+ "</td><td>" + element.userage
												+ "</td><td>"
												+ element.useraddress
												+ "</td></tr>";
										$("#main1").append(trstring);
									});
						},
						async : true
					});
				});
		//测试ajax的get请求,带参数
		$("#but3")
				.click(
						function() {
							//从文本框中得到请求参数
							var userid = $("#text1").val();
							var urlString = "http://localhost:8585/JqueryAjax/find?userid="
									+ userid;
							$.ajax({
								url : urlString,
								dataType : "json",
								success : function(resp, status) {
									$("#main1").empty();
									$(resp).each(
											function(index, element) {
												var trstring = "<tr><td>"
														+ element.userid
														+ "</td><td>"
														+ element.username
														+ "</td><td>"
														+ element.userage
														+ "</td><td>"
														+ element.useraddress
														+ "</td></tr>";
												$("#main1").append(trstring);
											});
								},
								async : true
							});
						});
		//测试ajax的POST请求，不带参数
		$("#but4").click(
				function() {
					$.ajax({
						url : "http://localhost:8585/JqueryAjax/main",
						type : "POST",
						dataType : "json",
						success : function(resp, status) {
							$("#main1").empty();
							$(resp).each(
									function(index, element) {
										var trstring = "<tr><td>"
												+ element.userid + "</td><td>"
												+ element.username
												+ "</td><td>" + element.userage
												+ "</td><td>"
												+ element.useraddress
												+ "</td></tr>";
										$("#main1").append(trstring);
									});
						},
						async : true,
						error : function() {
						}
					});
				});

		//测试ajax的POST请求，带参数
		/*
		$("#but5").click(function(){
			//从文本框中得到请求参数
			var userid=$("#text1").val();
			var urlString="http://localhost:8080/JqueryAjax/findOne?userid="+userid;
			$.ajax({
				url:urlString,
				type:"POST",
				dataType:"json",
				success:function(resp,status){
					$("#main1").empty();
					$(resp).each(function(index,element){
						var trstring="<tr><td>"+element.userid+
				        "</td><td>"+element.username+
						"</td><td>"+element.userage+
						"</td><td>"+element.useraddress+
						"</td></tr>";
				  		$("#main1").append(trstring);
					});
				},
				async:true,
				error:function(){}
			});
		});
		 */

		//测试ajax的POST请求，带参数
		$("#but5").click(
				function() {
					//从文本框中得到请求参数
					var userid = $("#text1").val();
					$.ajax({
						url : "http://localhost:8080/JqueryAjax/find",
						type : "POST",
						data : {
							userid : userid
						},
						dataType : "json",
						success : function(resp, status) {
							$("#main1").empty();
							$(resp).each(
									function(index, element) {
										var trstring = "<tr><td>"
												+ element.userid + "</td><td>"
												+ element.username
												+ "</td><td>" + element.userage
												+ "</td><td>"
												+ element.useraddress
												+ "</td></tr>";
										$("#main1").append(trstring);
									});
						},
						async : true,
						error : function() {
						}
					});
				});

		//测试jquery的get方法
		$("#but6").click(
				function() {
					$.get("http://localhost:8585/JqueryAjax/main", function(
							resp, status) {
						$("#main2").empty();
						$(resp).each(
								function(index, element) {
									var trstring = "<tr><td>" + element.userid
											+ "</td><td>" + element.username
											+ "</td><td>" + element.userage
											+ "</td><td>" + element.useraddress
											+ "</td></tr>";
									$("#main2").append(trstring);
								});
					}, "json");
				});

		//测试jquery的get方法,带参数
		$("#but6").click(
				function() {
					//从文本框中得到请求参数
					var userid = $("#text1").val();
					$.get("http://localhost:8585/JqueryAjax/find?userid="
							+ userid, function(resp, status) {
						$("#main2").empty();
						$(resp).each(
								function(index, element) {
									var trstring = "<tr><td>" + element.userid
											+ "</td><td>" + element.username
											+ "</td><td>" + element.userage
											+ "</td><td>" + element.useraddress
											+ "</td></tr>";
									$("#main2").append(trstring);
								});
					}, "json");
				});

		//测试jquery的post方法
		$("#but7").click(
				function() {
					$.post("http://localhost:8080/JqueryAjax/main", function(
							resp, status) {
						$("#main2").empty();
						$(resp).each(
								function(index, element) {
									var trstring = "<tr><td>" + element.userid
											+ "</td><td>" + element.username
											+ "</td><td>" + element.userage
											+ "</td><td>" + element.useraddress
											+ "</td></tr>";
									$("#main2").append(trstring);
								});
					}, "json");
				});

		//测试jquery的post方法,带参数
		$("#but7").click(
				function() {
					var userid = $("#text1").val();
					$.post("http://localhost:8585/JqueryAjax/find?userid="
							+ userid, function(resp, status) {
						$("#main2").empty();
						$(resp).each(
								function(index, element) {
									var trstring = "<tr><td>" + element.userid
											+ "</td><td>" + element.username
											+ "</td><td>" + element.userage
											+ "</td><td>" + element.useraddress
											+ "</td></tr>";
									$("#main2").append(trstring);
								});
					}, "json");
				});

	});
</script>
</head>
<body>
	<center>
		<input id="but1" type="button" value="测试load" />
		<div id="div1"></div>
		<hr>
		<input id="but2" type="button" value="测试ajax-get" /> <input id="but3"
			type="button" value="测试ajax-get带参数" /><br> <input id="text1"
			type="text" /><br> <input id="but4" type="button"
			value="测试ajax-post" /> <input id="but5" type="button"
			value="测试ajax-post带参数" />
		<table id="main1" border="1px" width="500px"></table>
		<hr>
		<input id="but6" type="button" value="测试get" /> <input id="but7"
			type="button" value="测试post" />
		<table id="main2" border="1px" width="500px"></table>
	</center>

</body>
</html>

执行结果：
在这里插入图片描述

满心欢喜！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery-3.0.0.min.js:4 POST http://localhost:62863/Home/insert 500 (Internal Server Error)
qq_40890601的博客
06-11 7638
问题 点击按钮提交表单一直返回error，查了资料原来是在ASP.NET MVC框架的JSON序列化返回对象时引发的一个运行时错误。也就是data格式错了， 后台是这样的 按照网上说的把data改了之后还是无果，还是一样报上面的错误 按照网上的方法加JSON.stringify()终于跳到后台，但传输过来的data为null，原来contentType: "application/json; charset=utf-8",这句需要与JSON.stringify()联合起来用。 然后我一直查为什么传
JQuery发送AJAX请求
gcsyzy的博客
04-01 1476
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
jQuery调用摄像头插件
03-31
jQuery调用摄像头插件
jQuery表格导出Excel文件以及网页内容导出Word文档
热门推荐
Kobe Bryant
08-05 1万+
前言： 我在这里给大家介绍一下我们能用代码实现的最简单的两种转换为Excel文件以及Word文档的方法。 jQuery表格导出Excel文件 先来看看我们的层级划分： 如图所示： demo.css 代码如下： body, html { font-size: 100%; padding: 0; margin: 0;} /* Reset */ *, *:after, *:before { -w...
Jquery -post
ccMao的博客
03-28 284
$.post(url, [data], [callback], [type])url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式，xml, html, script, json, text, _default。举个香甜的栗子导入jquery<script type="text/javascript" src="j
小白学Java35:jQuery
weixin_44478196的博客
09-03 149
小白学Java35:jQueryjQuery使用导入jQueryjQuery语法基础语法选择器常用事件jQuery特效隐藏/显示 jQuery使用 导入jQuery 本地导入 <script src="jquery-3.4.1.min.js"></script> 网络导入 百度:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> 新浪:<script src="https:/
jQuery_Ajax下载服务器文件流的方法
quyunde的博客
01-20 5934
一般ajax，只能处理xml, json, script, or html类型，对返回的文件流却没办法下载了。 本人编写了一个AJAX插件，实现文件流下载。 然后JAva后台采用往response里写文件流推送给前台。 废话不说，代码完整奉上，拿走不谢！ 01.jQuery_ajax_document.js /** * Ajax下载服务器文件流的方法 * @date 2020-01-...
jquery实现Ajax请求
qq_51635297的博客
11-09 7866
jquery实现Ajax请求
「jQuery系列」jQuery中Ajax的运用
日常笔记/总结/系列知识梳理
03-13 2433
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
用jQuery实现Ajax
m0_53698336的博客
11-01 6655
Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，它并不是一种技术，而是多种技术的综合体，其中包括 JavaScript、XML、JSON、DOM、CSS、HTML 以及最重要的 XMLHttpRequest 对象。通过 Ajax 可以异步从服务器请求数据并将数据更新到网页中，整个过程不需要重载（刷新）整个网页，可以将网页的内容更快的呈现给用户。 这里的异步是指，当程序执行到 Ajax 代码时，将
jQuery_Ajax
01-27
jQuery 是一个广泛使用的JavaScript库，它极大地简化了前端与服务器端的数据交互，特别是通过Ajax技术。Ajax（异步JavaScript和XML）允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，提供...
Jquery_ajax实现搜索
10-24
在网页开发中，jQuery AJAX 是一种非常常用的技术，它允许我们实现异步数据交互，无需刷新整个页面即可从服务器获取或发送数据。本教程将详细讲解如何使用 jQuery AJAX 实现搜索功能。 首先，理解 AJAX...
Aula_jQuery_Ajax
05-20
Class_jQuery_Ajax 由@rafegal教授的@digitalinnovationone的jQuery库介绍-jQuery是一个JavaScript库，可通过减少的代码生成效果和动画，而无需在浏览器中进行任何外部安装。 :rocket: 使用的技术该项目是使用以下...
Aula_Jquery_Ajax：Aula sobre JQuery和Ajax
03-02
**jQuery和Ajax简介** 在IT领域，jQuery和Ajax是两个非常关键的技术，它们极大地简化了网页的动态交互和数据更新。本教程"Aula_Jquery_Ajax"将深入讲解这两个概念，帮助开发者提升网页开发的效率。 **jQuery：前端...
ajax jquery操作ajax
fagdg的博客
07-25 1370
type可选返回内容格式，xml,html,script,json,text,_default。callback可选载入成功时回调函数。data可选待发送Key/value参数。url必需待载入页面的URL地址。
Ajax学习笔记
2301_79614379的博客
07-21 1046
定义：asyn和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise。概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值。定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环。axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应的结果统一处理。Promise本身是同步的，而then和catch回调函数是异步的。
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
最新发布
柯晓楠
07-24 2651
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 1029
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
js/plugin/jquery_ajax_document.js
08-26
js/plugin/jquery_ajax_document.js是一个使用jQuery库的插件，用于处理Ajax请求和处理文档对象的操作。 该插件提供了一些方法来发送Ajax请求，可以将请求发送到服务器并获取响应数据。通过使用这些方法，我们可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值