jQuery对ajax的支持

最新推荐文章于 2024-07-16 17:52:21 发布

迷失的小鹿

最新推荐文章于 2024-07-16 17:52:21 发布

阅读量249

点赞数

文章标签： ajax jquery

本文链接：https://blog.csdn.net/Java_Fly1/article/details/105906960

版权

tarenna 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery对ajax的支持

$.ajax()
- get请求
- post请求
$.get()
$.post
load()
- 案例

$.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的支持

jQuery对ajax的支持$.ajax()get请求post请求$.get()$.postload()$.ajax()提交AJAX请求1)用法$.ajax({});{}是一个对象，用来指定一些选项参数（控制ajax对象如何向服务器发送请求）。常见的选项参数有如下一些:a. url 指定请求地址，比如"quoto.do"。b. type 指定请求类型，比如"g...
复制链接

扫一扫