jQuery_ajax

最新推荐文章于 2024-07-15 22:52:27 发布

三斤伍花肉

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量139

点赞数

分类专栏：笔记文章标签： jquery ajax

本文链接：https://blog.csdn.net/sinat_50855580/article/details/115304558

版权

笔记专栏收录该内容

78 篇文章 0 订阅

订阅专栏

Jquery_ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

jQuery中常用的AJAX方法

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

格式:$(selector).load(url,data,function(response,status,xhr))

url-您需要加载的 URL

data-请求参数

function(response,status,xhr)--完成时运行的回调函数

response - 包含服务器返回的结果数据

status - 包含请求的状态【"success"、"notmodified"、"error"、"timeout"、"parsererror"】

xhr - 包含 XMLHttpRequest 对象

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

格式:$.ajax({name:value, name:value, ... })

url----您需要加载的 URL 例如:$.ajax({url:”login”})

type--规定请求的类型（GET 或 POST）例如:$.ajax({url:”login”,type:”GET”})

data--规定要发送到服务器的数据.

dataType--服务器响应的数据类型

success(result,status,xhr)---当请求成功时运行的函数

async---布尔值，表示请求是否异步处理。默认是 true。

error(xhr,status,error)--如果请求失败要运行的函数

3.$.get()--使用 AJAX 的 HTTP GET 请求从服务器加载数据

格式:$.get(URL,data,function(data,status,xhr),dataType)

url----您需要加载的 URL

data--规定要发送到服务器的数据.

function(data,status,xhr)---当请求成功时运行的函数

dataType--服务器响应的数据类型 “text” “json” “xml”

4.$.post()--使用 AJAX 的 HTTP POST 请求从服务器加载数据

格式:$(selector).post(URL,data,function(data,status,xhr),dataType)

url----您需要加载的 URL

data--规定要发送到服务器的数据.

function(data,status,xhr)---当请求成功时运行的函数

dataType--服务器响应的数据类型 “text” “json” “xml”

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试jquery的ajax</title>
		<!-- 导入jquery函数库-->
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$.get("http://127.0.0.1:8080/ajax/test",
						function(data){
							$("#h1").text(data);
						},"text");
				});
				$("#but2").click(function(){
					$.post("http://127.0.0.1:8080/ajax/test",
						function(data){
							$("#h1").text(data);
						},"text");
				});
				//get发送有参数的请求
				/*
				$("#but3").click(function(){
					var username=$("#text1").val();
					var password=$("#text2").val();
					$.get("http://127.0.0.1:8080/ajax/hello?username="+username+"&password="+password,
						function(data){
							$("#h1").text(data);
						},"text");
				});
				*/
				$("#but3").click(function(){
					var username=$("#text1").val();
					var password=$("#text2").val();
					var data="username="+username+"&password="+password;
					$.get("http://127.0.0.1:8080/ajax/hello",
						  data,
						  function(data){
							$("#h1").text(data);
						},"text");
				});
				
				//post发送有参数的请求
				/*
				$("#but4").click(function(){
					var username=$("#text1").val();
					var password=$("#text2").val();
					$.post("http://127.0.0.1:8080/ajax/hello?username="+username+"&password="+password,
						  function(data){
							$("#h1").text(data);
						},"text");
				});
				*/
			   
			   /*
			   $("#but4").click(function(){
			   	var username=$("#text1").val();
			   	var password=$("#text2").val();
			   	var data="username="+username+"&password="+password;
			   	$.post("http://127.0.0.1:8080/ajax/hello",
					  data,
			   		  function(data){
			   			$("#h1").text(data);
			   		},"text");
			   });
			   */
			   $("#but4").click(function(){
			   	var username=$("#text1").val();
			   	var password=$("#text2").val();
				var data={"username":username,"password":password};
			   	$.post("http://127.0.0.1:8080/ajax/hello",
						data,
			   		   function(data){
			   			$("#h1").text(data);
			   		},"text");
			   });
			   //get方式返回json字符串
			   $("#but5").click(function(){
			   	$.get("http://127.0.0.1:8080/ajax/mytest",
			   		function(data){
						//dataType===“text”---json字符串==>json对象
						//var jsonObj=JSON.parse(data);
						//var stuinfo=jsonObj.stuid+","+jsonObj.stuname;
						//$("#h1").text(stuinfo);
						//dataType==="json"--json对象
						$("#h1").text(data);
			   		},"json");
			   });
			   //post方式，返回json
			   $("#but6").click(function(){
			   	$.post("http://127.0.0.1:8080/ajax/mytest",
			   		function(data){
			   			//dataType==="json"--json对象
			   			$("#h1").text(data);
			   		},"json");
			   });
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试get方法发送无参数的ajax请求">
		<input id="but2" type="button" value="测试post方法发送无参数的ajax请求"><br>
		<input id="but3" type="button" value="测试get方法发送有参数的ajax请求">
		<input id="but4" type="button" value="测试post方法发送有参数的ajax请求"><br>
		<input id="but5" type="button" value="测试get方法发送ajax请求,返回json">
		<input id="but6" type="button" value="测试post方法发送ajax请求,返回json"><br>
		<input id="text1" type="text" /><br>
		<input id="text2" type="text" /><br>
		<h1 id="h1"></h1>
	</body>
</html>

三斤伍花肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_ajax

Jquery_ajaxAjax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。jQuery中常用的AJAX方法1.load()从服务器加载数据，并把返回的数据放置到指定的元素中格式:$...
复制链接

扫一扫

专栏目录