JQ三种方式实现Ajax请求

最新推荐文章于 2024-08-09 17:26:52 发布

神韵499

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量1.2k

点赞数 1

分类专栏： Ajax/JSON 模块前沿技术文章标签： JQ实现Ajax $.get $.post $.ajax

本文链接：https://blog.csdn.net/qq_41055045/article/details/100517565

版权

前沿技术同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Ajax/JSON 模块

7 篇文章 0 订阅

订阅专栏

一、单纯GET请求 $.get()

二、单纯POST请求 $.post()

三、指定GET/POST方式 $.ajax

一、单纯GET请求 $.get()

1、w3c上的介绍

2、代码实现

jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jq $.get</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/ajax3.js"></script>
</head>
<!-- jq $.get -->
<body>
	<button id="button">ajax技术 get请求</button>
	<hr />
	<span id='span'></span>
</body>
</html>

js文件

$(function() {
	$("#button").click(function() {
		//function(data, status)是指回流函数，data是写回在缓存中的数据，status是运行状态
        //$.get("AjaxServlet2",{username:"lisi"}, function(data, status) {这样子写也是一样的，最后get请求都会带随参数可见
		$.get("AjaxServlet2?username=lisi", function(data, status) {
			alert("Data: " + data + "\nStatus: " + status);
			$("#span").text(data);
		});
	})
})

Servlet文件（后面都是用这个）

package com.demo.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 功能：ajax底层实现
 * 时间：2018-12-9
 * @author 
 *
 */
@WebServlet("/AjaxServlet2")
public class AjaxServlet2 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取请求信息
		String username = request.getParameter("username");
		//响应请求信息
		response.getWriter().write("username:"+username);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

测试结果

二、单纯POST请求 $.post()

1、w3c上的介绍

2、代码演示

jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jq $.post</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/ajax4.js"></script>
</head>
<!-- jq $.post -->
<body>
	<button id="button">ajax技术 post请求</button>
	<hr />
	<span id='span'></span>
</body>
</html>

js文件

$(function() {
	$("#button").click(function() {
		//function(data, status)是指回流函数，data是写回在缓存中的数据，status是运行状态
		$.post("AjaxServlet2",{username:"wangwu"}, function(data, status) {
			alert("Data: " + data + "\nStatus: " + status);
			$("#span").text(data);
		});
	})
})

测试结果

三、指定GET/POST方式 $.ajax

1、代码及常用属性介绍

jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jq $.ajax</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/ajax5.js"></script>
</head>
<!-- jq $.ajax -->
<body>
	<button id="button">ajax技术 post请求</button>
	<hr />
	<span id='span'></span>
</body>
</html>

js文件

$(function() {
	$("#button").click(function() {
		$.ajax({
			url:"AjaxServlet2",			//请求的url
			type:"post",				//请求提交的方式
			data:{username:"zhaoyun"},	//请求传递的参数
			success:function(data, status){//回调函数 data是写回在缓存中的数据，status是运行状态
				alert("Data: " + data + "\nStatus: " + status);
				$("#span").text(data);
			},
			error:function(){			//当出现错误执行的回调函数
				alert("出错了");
			},
			dataType:"text"				//预期服务器返回的数据类型,常用json
		});
	})
})

2、测试结果