Servlet+HTML+Jquery+JDBC

最新推荐文章于 2022-11-26 12:15:42 发布

VIP文章画_船_听_雨

最新推荐文章于 2022-11-26 12:15:42 发布

阅读量171

点赞数

分类专栏：入门文章标签： ajax 数据库 java

本文链接：https://blog.csdn.net/weixin_52192654/article/details/115316960

版权

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)---当请求成功时运行的函数

result--响应结果

status--响应状态

xhr-- 包含 XMLHttpRequest 对象

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”

例如:

1.创建html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试jQuery的Ajax</title>
		<script src="../js/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				//测试get方法发送无参数的ajax请求
				$("#but1").click(function(){
					$.get("http://127.0.0.1:8080/TestAjax/test",
						function(data){
								alert(data);
								$("#h1").text(data);
							},"text");
				});
				//测试post方法发送无参数的ajax请求
				$("#but2").click(function(){
					$.post("http://127.0.0.1:8080/TestAjax/test",
					function(msg){
						 $("#h1").text(msg);
						},"text");
				});
				
				//get发送有参数的请求
				/*
				$("#but3").click(function(){
					var username = $("#text1").val();
					var password = $("#text2").val();
					$.get("http://127.0.0.1:8080/TestAjax/test2?username="+username+"&password="+password,
					function(msg){
						$("#h1").text(msg);
					},"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/TestAjax/test2",
						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/TestAjax/test2?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/TestAjax/test2",
					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/TestAjax/test2",
				   data,
				   function(data){
					   $("#h1").text(data);
				   },"text");
			   });
		   //get方式返回json字符串 
				$("#but5").click(function(){
					$.get("http://127.0.0.1:8080/TestAjax/test3",
					function(data){
					//dataType==="text"---json字符串==>json对象
					//var jsonObj = JSON.parse(data);
					//var stuinfo = jsonObj.stuid+","+jsonObj.stuname+","+jsonObj.stuage+","+jsonObj.stupass;
					//$("#h1").text(stuinfo);
					
					//dataType=="json"-->json对象
					$("#h1").text(data);
					},"json");
				});
			  //post方式，返回json
				  $("#but6").click(function(){
					  $.post("http://127.0.0.1:8080/TestAjax/test3",
					  function(data){
						  //datatype=="json"-->json对象
						  $("#h1").text(data.stuname);
					  },"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>

2.创建处理请求的Servlet

1.添加过滤器对跨域请求做出处理

package com.wangxing.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CORSFilter implements Filter{

	@Override
	public void destroy() {
		
	}

	@Override
	public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
			throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) req;
		HttpServletResponse response = (HttpServletResponse) resp;
		//跨域请求，*代表允许全部类型
		response.setHeader("Access-Control-Allow-Origin", "*");
		//允许请求方式
		response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
		//用来指定本次预检请求的有效期，单位为秒，在此期间不用发出另一条预检请求
		response.setHeader("Access-Control-Max-Age", "3600");
		//请求包含的字段内容，如有多个可用哪个逗号分隔如下
		response.setHeader("Access-Control-Allow-Headers", "content-type,x-requested-with,Authorization, x-ui-request,lang");
		//访问控制允许凭据，true为允许

最低0.47元/天解锁文章

画_船_听_雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Servlet+HTML+Jquery+JDBC

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

扫一扫