jQuery对ajax的支持

最新推荐文章于 2022-06-12 19:06:16 发布
最新推荐文章于 2022-06-12 19:06:16 发布
阅读量249 收藏
点赞数
文章标签： ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_Fly1/article/details/105906960
版权

jQuery对ajax的支持

$.ajax()

提交AJAX请求

1)用法
$.ajax({});
{}是一个对象，用来指定一些选项参数（控制ajax对象如何向服务器
发送请求）。常见的选项参数有如下一些:
a. url 指定请求地址，比如"quoto.do"。
b. type 指定请求类型，比如"get"，“post”。
c. data 指定请求参数，有两种写法:
写法1:　请求字符中的形式,比如 “uname=Sally”
写法2: 对象形式，比如 {“uname”:“Sally”}
d. dataType 指定服务器返回的数据类型:
json json字符串
text 文本
html html文档
xml xml文档
script javascript脚本
e. success 指定一个函数，用来处理服务器返回的数据。
注：当ajax对象收到了服务器返回的所有数据，并且
服务器处理成功。
f. error 指定一个函数，用来处理服务器发生异常的情况。
g. async 指定同步还异步，缺省值是true(异步)。

get请求

1.下载jquery.js
2.使用jquery封装的Ajax进行异步的get请求

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户名注册重复校验</title>
<script src="js/jquery-1.4.3.js"></script>
<script>
	function check(){
		$.ajax({
			url:'check',
			type:'GET',
			data:{
				"uname":$("#uname").val()
			},
			dataType:"text",
			success:function(data){
				$('#msg').html(data);
			}
		});
	}
</script>
</head>
<body style="font-size:20px;">
	<form action="" method="post">
		<fieldset>
			<legend>注册</legend>
			用户名:<input id="uname" name="uname" onblur="check();"/>
			<span id="msg" style="color:red;"></span>
			<br/>
			密码:<input type="password" name="pwd"/><br/>
			<input type="submit" value="确定"/>
		</fieldset>
	</form>
</body>
</html>

package web;

import java.io.IOException;
import java.io.PrintWriter;

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

@WebServlet("/check")
public class UserServlet extends HttpServlet {
	public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 设置请求编码格式
		req.setCharacterEncoding("UTF-8");
		// 设置响应编码格式
		resp.setContentType("text/html;charset=utf-8");
		resp.setCharacterEncoding("UTF-8");
		// 获取请求信息
		String uname = req.getParameter("uname");
		if ("sally".equals(uname)) {
			resp.getWriter().println("改用户名已被注册！");
		} else {
			resp.getWriter().println(uname + "注册成功！");
		}
	}
}

测试
在这里插入图片描述

post请求

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户名注册重复校验</title>
<script src="js/jquery-1.4.3.js"></script>
<script>
	function check(){
		$.ajax({
			url:'check',
			type:'POST',
			data:{
				"uname":$("#uname").val()
			},
			dataType:"text",
			success:function(data){
				$('#msg').html(data);
			}
		});
	}
</script>
</head>
<body style="font-size:20px;">
	<form action="" method="post">
		<fieldset>
			<legend>注册</legend>
			用户名:<input id="uname" name="uname" onblur="check();"/>
			<span id="msg" style="color:red;"></span>
			<br/>
			密码:<input type="password" name="pwd"/><br/>
			<input type="submit" value="确定"/>
		</fieldset>
	</form>
</body>
</html>

package web;

import java.io.IOException;
import java.io.PrintWriter;

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

@WebServlet("/check")
public class UserServlet extends HttpServlet {
	public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 设置请求编码格式
		req.setCharacterEncoding("UTF-8");
		// 设置响应编码格式
		resp.setContentType("text/html;charset=utf-8");
		resp.setCharacterEncoding("UTF-8");
		// 获取请求信息
		String uname = req.getParameter("uname");
		if ("sally".equals(uname)) {
			resp.getWriter().println("此用户名已被注册！");
		} else {
			resp.getWriter().println(uname + "注册成功！");
		}
	}
}

测试
在这里插入图片描述
完整的Ajax请求模板

$.ajax({
    url:"http://www.microsoft.com", //请求的url地址
    dataType:"json", //返回格式为json
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{"id":"value"}, //参数值
    type:"GET", //请求方式
    beforeSend:function(){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(){
        //请求完成的处理
    },
    error:function(){
        //请求出错处理
    }
});

$.get()

使用get方式提交ajax

//语法
$.get(URL,data,function(data,status,xhr),dataType)

获取随机数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机数</title>
<script src="js/jquery-1.4.3.js"></script>
<script>
	function getNumber() {
		$.get('getNumber', {
			"r" : Math.random()
		}, function(result) {
			$('#msg').html(result);
		});
	}
</script>
</head>
<body style="font-size: 20px;">
	<a href="javascript:getNumber();">点这儿，显示一个随机整数</a>
	<div id="msg"></div>
</body>
</html>

package web;

import java.io.IOException;
import java.util.Random;

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

@WebServlet("/getNumber")
public class RandomAction extends HttpServlet {
	public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=UTF-8");
		resp.setCharacterEncoding("UTF-8");
		Random r=new Random();
		int random=r.nextInt(1000);
		System.out.println(random);
		resp.getWriter().println("此次随机数为:"+random);
	}
}

测试
点击链接，页面显示当前的随机数
在这里插入图片描述

$.post

//语法
$.post(URL,data,callback);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机数</title>
<script src="js/jquery-1.4.3.js"></script>
<script>
	function getNumber() {
		$.post('getNumber', {
			"r" : Math.random()
		}, function(data) {
			$('#msg').html(data);
		})
	}
</script>
</head>
<body style="font-size: 20px;">
	<a href="javascript:getNumber();">点这儿，显示一个随机整数</a>
	<div id="msg"></div>
</body>
</html>

package web;

import java.io.IOException;
import java.util.Random;

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

@WebServlet("/getNumber")
public class RandomAction extends HttpServlet {
	public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=UTF-8");
		resp.setCharacterEncoding("UTF-8");
		Random r=new Random();
		int random=r.nextInt(1000);
		System.out.println(random);
		resp.getWriter().println("此次随机数为:"+random);
	}
}

测试
在这里插入图片描述

load()

向服务器发送异步请求，并且将服务器返回的数据直接添加到
符合要求的节点之上。
1)用法
$obj.load(url,[data]);
注:
url:请求地址,比如 “getNumber.do”
data:请求参数，有两种写法（同上） 。

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>股票实时行情</title>
<script src="js/jquery-1.4.3.js"></script>
<style>
#d1 {
	width: 450px;
	height: 350px;
	background-color: black;
	margin-left: 400px;
	margin-top: 10px;
}

#d2 {
	color: yellow;
	background-color: red;
	height: 40px;
}

table {
	color: #FFF;
	font-style: italic;
	font-size: 24px;
}
</style>
<script>
	$(function() {
		//页面加载完成，每隔5秒，执行quoto函数
		setInterval(quoto, 5000);
	});
	/*
		向服务器发送异步请求，并且将服务器返回的json字符串解析出来，然后更新表格
	 */
	function quoto() {
		$.ajax({
			"url" : "quoto",
			"type" : "post",
			"dataType" : "json",
			"success" : function(data) {
				/*
					用来处理服务器返回的数据
					data:服务器返回的数据。
					注：
						如果服务器返回的是json字符串，
						会自动转换成相应的js对象。
				 */
				$('#tb1').empty();
				for (i = 0; i < data.length; i++) {
					var s = data[i];
					$('#tb1').append(
							'<tr><td>' + s.code + '</td><td>' + s.name
									+ '</td><td>' + s.price + '</td></tr>');
				}
			},
			"error" : function() {
				//处理异常
			}
		});
	}
</script>
</head>
<body style="font-size: 30px;">
	<div id="d1">
		<div id="d2">股票实时行情</div>
		<div id="d3">
			<table width="100%">
				<thead>
					<tr>
						<td>代码</td>
						<td>名称</td>
						<td>价格</td>
					</tr>
				</thead>
				<tbody id="tb1">
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

package web;

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

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

import com.fasterxml.jackson.databind.ObjectMapper;

import pojo.Stock;

/**
 *
 */
@WebServlet("/quoto")
public class LoadACtion extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String uri = request.getRequestURI();
		String action = uri.substring(uri.lastIndexOf("/"));

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		System.out.println("action:" + action);
		List<Stock>stocks=new ArrayList<Stock>();
		Random r=new Random();
		for(int i=0;i<8;i++) {
			Stock stock=new Stock();
			stock.setCode("60087"+r.nextInt(10));
			stock.setName("中国嘉陵"+r.nextInt(10));
			stock.setPrice(r.nextInt(1000));
			stocks.add(stock);
		}
		//使用jackson提供的api来转换
		ObjectMapper orm=new ObjectMapper();
		String jsonStr=orm.writeValueAsString(stocks);
		System.out.println(jsonStr);
		//将字符串发送给浏览器
		out.println(jsonStr);
	}

}

测试
在这里插入图片描述

迷失的小鹿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery对ajax的支持介绍
10-26
本文为大家介绍下jquery对ajax的支持性，感兴趣的朋友可以了解下
ajax对jquery的支持
06-14
在本案例中，“ajax对jquery的支持”是指使用jQuery库来实现一个实时股票更新的功能。 jQuery的AJAX功能通过`.ajax()`方法提供，它封装了XMLHttpRequest对象，使得开发者可以更加便捷地发送HTTP请求。以下是如何...
jquery对ajax的支持
weixin_34289454的博客
05-20 119
前面详细介绍的了XMLHttpRequest http://www.cnblogs.com/shenliang123/archive/2012/05/13/2498524.html，是采用纯js的方式来实现的，这样有助于我们对底层XMLHttpRequest的实现的了解，但也有缺点就是创建会比较的麻烦并且不够果断 今天就来说说jquery对于ajax的支持，jquery封装了XMLHttpReq...
jquery对 ajax 的支持
纸鸢栀年°的博客
08-31 200
jquery对 ajax 的支持 1.$obj.load() ​ 作用：载入远程的HTML文件到指定的元素中 $obj.load(url,data,callback) $obj:显示响应内容的jq元素 url:请求地址 data:请求参数(可省略) 方式1:字符串传参 "key1=value1&key2=value2" 注：此种传参会使用 get 方式发送请求 方式...
jQuery对Ajax的支持
JavaPorter的博客
09-19 418
jQuery对Ajax的支持: jQuery对Ajax进行封装,提供$.ajax()方法 //在script输入这段代码可以:在页面加载完后,执行这段代码里面的内容 $(function(){ }) //实例 $(function(){ $.ajax({ $(function(){ "url" : "传入映射地址", "type" : "选择get或set方法", ...
SpringMVC+Jquery实现Ajax功能
10-16
jQuery对Ajax的支持使得开发者能轻松地创建异步请求，与服务器进行数据交互。jQuery的主要优点包括： 1. 兼容多种浏览器，包括旧版本的IE。 2. 提供简洁的API，简化Ajax操作。 3. 提供丰富的插件，扩展了其功能。 *...
Ajax和Jquery
04-27
jQuery对Ajax进行了封装，使得使用Ajax变得更加简单。例如，`$.get()`和`$.post()`方法分别用于GET和POST请求，它们接受URL、数据、回调函数等参数。`$.getJSON()`则用于获取JSON格式的数据。jQuery还提供了`$....
Jquery跨域Ajax请求测试
08-26
本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先，了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制，它规定了只有来自同一协议、同一域名和同一...
Jquery对ajax的支持
it_boy_elite的博客
09-20 411
AJAX = (Asynchronous JavaScript and XML)异步的JavaScript和XML。 作用：通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Jquery对AJAX的支持 //jquery调用ajax相对于js的优势： 1.代码简洁。 2.多浏览器支持。 3.逻辑处
jquery对AJAX的支持
FairyKunKun的博客
06-12 196
语法：$.ajax(参数);参数是json格式{type: “GET或POST”,url : “请求的服务器地址”,data：“仅限于POST提交数据k1=v1&k2=v2…kn=vn”，success:function(responseText){做事}}
jquery支持的ajax
andQ的博客
07-30 466
1.$.ajax $.ajax({ //type:"post", url : "myServlet1.do", cache ： false,//关闭缓存 dataType : "text", data : "username=张三&amp;password=123", success : function(data) { aler...
Jquery支持的AJAX
Jason的博客
03-01 424
1、JQuery支持的Ajax功能实现方式： 一共有四种方式来实现JQuery的ajax功能分别为： $.ajax $.get $.post $.onload 1、$.ajax方式 这个方法是最接近原生Ajax的一个方法： 常用属性有： type：用于指定类型取值为POST或GET url:请求资源路径 dataType:异步请求返回类型，取值为：text,json,html,x...
jQuery对ajax编程的支持
越前的博客
08-30 959
(1)$.ajax方法。 用法:     $.ajax({         属性名:属性值,         ...     }); 注:     通过属性名和属性值来控制ajax对象如何向服务器发请求。     常见的属性有如下一些:     url         请求地址 (比如 'quoto.do')     type        请求类型(比如 'get','pos
jQuery教程：轻松掌握AJAX使用
然而，由于不同浏览器对AJAX的支持存在差异，开发时需要编写兼容性的代码。jQuery作为一款流行的JavaScript库，它提供了一套统一且简化的API，使得开发者能够更轻松地处理AJAX请求。 在原始的Ajax实现中，通常需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值