jquery访问服务器

使用 jquery ajax访问后台服务器demo 立即下载

服务器

目录

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.bootvue</groupId>
  <artifactId>springvue</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>springvue Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.5.RELEASE</version>
	</parent>
	
	<dependencies>
		 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>           
        </dependency>	
		

	</dependencies>
	<build>
		<finalName>springvue</finalName>
			<plugins>
			
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>			 
		</plugins>		
	</build>	
</project>

main

package com.bootvue;

import java.io.IOException;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;


import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@RestController
@SpringBootApplication
@ServletComponentScan(basePackages = "com.bootvue.filter")
public class SpringVue {	
	@RequestMapping("/register")
    public @ResponseBody
    Map select(@RequestParam Map map,HttpServletRequest req) throws ServletException, IOException {   
		
        return map;     
    }
	
	@RequestMapping("/login")
    public @ResponseBody
    Map login(@RequestParam Map map,HttpServletRequest req) throws ServletException, IOException {     
        if ("zsls".equals(map.get("user"))) {
        	map.put("login", "success");
        	req.getSession().setAttribute("islogin", map.get("user"));
		} else { 
			map.put("login", "fail");
			req.getSession().setAttribute("islogin", null);
		}             
		
        return map;     
    }
	
	@RequestMapping("/tologin")
    public @ResponseBody
    Map toLogin(@RequestParam Map map,HttpServletRequest req) throws ServletException, IOException {     
       	map.put("login", "tologin");  		
        return map;     
    }
	
	
	public static void main(String[] args) {
		SpringApplication.run(SpringVue.class, args);
	}
	

	

}

filter

package com.bootvue.filter;

import java.io.IOException;
import java.util.Arrays;
import java.util.HashSet;
import java.util.Set;

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.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebFilter(filterName = "test", urlPatterns = "/*")
public class CrosFilter implements Filter {

	public void init(FilterConfig filterConfig) throws ServletException {

	}

	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {

		HttpServletResponse response = (HttpServletResponse) servletResponse;
		HttpServletRequest request = (HttpServletRequest) servletRequest;
		
//		String[] allowDomains = {"http://127.0.0.1:800","http://www域名2"};
//        Set allowOrigins = new HashSet(Arrays.asList(allowDomains));
//        
        String originHeads = request.getHeader("Origin");       
        System.out.println(originHeads);
        if(originHeads==null) originHeads="*";
	
		boolean loginURL = request.getRequestURI().contains("tologin") || request.getRequestURI().contains("login");
		response.setHeader("Access-Control-Allow-Origin", originHeads);
		response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE,HEAD,PUT,PATCH");
		response.setHeader("Access-Control-Max-Age", "36000");
		response.setHeader("Access-Control-Allow-Headers",
				"Origin, X-Requested-With, Content-Type, Accept,Authorization,authorization");
		response.setHeader("Access-Control-Allow-Credentials", "true");
		String islogin = (String) request.getSession().getAttribute("islogin");
		System.out.println(request.getRequestURI());
		System.out.println("islogin="+islogin);
		if (!loginURL)
			if (!"zsls".equals(islogin)) {
				response.sendRedirect("tologin");
				return;
			}
		filterChain.doFilter(servletRequest, servletResponse);
	}

	public void destroy() {

	}
}

 

前端

islogin.js

$.ajax({
		url:"http://127.0.0.1:8080/register",	
		xhrFields:{
			            withCredentials:true
	    },
		crossDomain:true,
		success:function(res){		
			console.log(res)
			if(res.login=="tologin"){
				window.location.href="login.html"
			}
		}
	});

 

login.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="jquery.min.js"></script>
		<script>
	$(function(){
		$("input[type='button']").click(function(){
			$.ajax({
				url:"http://127.0.0.1:8080/login",
				data:{user:$("#user").val()},
				xhrFields:{
				            withCredentials:true
				        },
				crossDomain:true,
				success:function(res){
					if(res.login=="fail")
					{
						 $("#fts").html(res.login)
					}else{
						alert("success");
						window.location.href="index.html"
					}
				}
			});
			
		})
	});	
	</script>	
		<title></title>
	</head>
	<body>
	user:<input id="user" /> <font id="fts" color=red></font><br>
	pass:<input id="pass" />
	<input   type="button" value="login" />
	</body>
</html>

test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="islogin.js"></script>
	</head>
	<body>
		test...............
	</body>
</html>

访问效果(单独访问或协议访问)

打开test.html

直接跳到login.html

登录后访问

 

islogin:用于检查用户是否登录的快速中间件 登录 这是一个 Express 中间件,主要用于检查用户是否登录 安装 npm install islogin 用法 *Notice: in the lib use req.logined || req.session.logined to verify, If you need to custom, please use a custom validator* 在 app.js 中 Use before the start of the route, here is the batch set all need to check the URL list, support for regular expressions app.use(islogin({pattern:[/\/test\/*?/,'/home/index','/user/add'],redirect:' 立即下载

相关推荐

【硬件自锁开关】用两个D触发器完成实用的自锁开关电路

性价比是做电子设计的人要考虑的事,在学会了用单片机解决大多数问题的时候,是否你也想过用简单的手段解决一个多数场合要解决的问题呢?按一下,输出状态由关闭变成开启,再按一下开启变成关闭。机械弹簧式的开关可以实现自锁的功能:钩子和弹簧将当前状态“储存”起来,这个能量为下一次触发的提供状态“翻转”的动力;在电子设计中,经常通过单片机的程序指令实现自锁:通过寄存器将当前电平状态暂存起来,下一次触发的时候寄存器内容“取反”,再将其输出到端口。可否用电路实现以上过程呢?完全可以,方案很简单,通过两个D触发器即可实现。

qq_33175704的博客 4254

推荐一些国内的jQuery CDN免费服务[转]

jquery是个非常流行的JS前端框架,在很多网站都能看到它的身影。很多网站都喜欢采用一些jquery CDN加速服务,这样网站加载jquery会更快。

斗战圣Q 939

评分卡建模学习(一)————数据预处理part.3

目录六、数据处理的思路及代码(一)对缺失值的处理:在我这个数据预处理的part.1板块(二)对异常值的处理:在我这个数据预处理的part.2板块(三)数据归一化、标准化:在我这个数据预处理的part.2板块(四)非结构化数据转变+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++———————————————————————————————————————————++++++++++++++++++++++++++

Morven_dai的博客 898

jq实现ajax访问服务器,jQuery实战读书笔记(第八章 使用 Ajax 与服务器通信)

1. 加载内容到元素中1.1 使用 jQuery 加载内容load(url, parameters, callback)url - 服务器端资源的URLparameters - 作为请求参数传递的数据,可以是字符串(作为查询字符串),也可以是对象(属性会被序列化为正确编码的参数),或者对象组成的数组。如果是对象或数组,则使用POST请求,如果省略或者指定为字符串,则使用GET请求。callback...

weixin_42361611的博客 476

3D Slicer-最强大的开源医学图像分割工具简要概述

3D Slicer 是一个免费的开源软件平台,用于医学、生物医学和其他 3D 图像的可视化、处理、分割、配准和分析。读/写DICOM图像和多种其他格式;三维图像、多边形网格和体积渲染的交互式可视化;手动编辑和标记图像;使用刚性和非刚性算法融合和共同配准数据;图像自动分割;跟踪图像引导程序的设备。所有的功能模块可在工具栏里找到,提供搜索,下拉选择,左右切换等功能。3D slicer的大概情况就介绍到这里。它的功能非常强大,也没有必要说掌握每个功能的使用。

Tina姐的博客 2万+

【国产化信创实践】宝兰德bes中间件集成springboot

【国产化信创实践】宝兰德bes中间件集成springboot

项目管理、软件工厂、vue研发、Java研发、中国文化等。 1万+

各种使用jquery技术实现请求服务器的方式

方式1:   $.getJSON $.getJSON("jsontest!returnMessage.action",function(data){ //通过.操作符可以从data.message中获得Action中message的值 $("#message").html(""+data.message+""); });$.getJSON("jsontest!returnL

L-BAKE 1150

10|Git Diff 与增量代码识别:本次到底改了哪些代码?

本文介绍 Git Diff 和增量代码识别,帮助你理解精准测试如何先找到本次真正变化的代码。测试开发工程师。Java 后端开发工程师。质量平台 / DevOps 平台建设者。想了解精准测试落地方法的技术负责人。

专注 AI 精准测试平台实战落地,分享从代码 Diff 到回归决策的完整工程闭环。主张“先建数据链路,再上 AI 智能”,让测试从“靠经验”走向“基于风险”。 160

jquery 实现客户端与服务端数据交互

html 代码如下: View Code 1 <a id="ViewInfo" href="javascript:void(0)" class="link" onclick="ViewMsg(<%#Eval("RecordID")%>);return false;">查看全部</a> 2 <div id="ViewMsg"...

weixin_30346033的博客 356

智能生活中枢:基于 ESP32-S3 的桌面智能助手与日程提醒终端设计与实现

本文完成了基于 ESP32-S3 的桌面智能助手与日程提醒终端的完整设计,实现了时间同步、日程管理、声光提醒、环境监测、本地存储等核心功能。硬件接线简洁、软件逻辑清晰,可直接制作成品使用。硬件方案:以 ESP32-S3 为核心,搭配 OLED、DS3231、DHT11、按键、声光模块,接线标准化、易复刻;软件方案:基于 Arduino 开发,提供标准 Mermaid 软件流程图,代码模块化、可直接编译运行;核心功能:网络授时、本地日程管理、掉电存储、声光提醒、温湿度监测,满足桌面智能助手全场景需求。

weixin_42300449的博客 209

[明道云] -基础教学1- 创建第一个工作表:从 0 到实用

明道云工作表相当于数据库表,是存储业务数据的核心组件。创建工作表主要有两种方式:1)从空白新建,通过添加字段(最多200个)、设置属性、配置表单样式;2)从Excel导入,需选择sheet、配置字段映射。创建后系统自动生成默认视图,支持多种视图形式(看板/日历等)。建议设置合适的标题字段和关联关系,初学者可在一小时内完成基础应用搭建。后续可扩展权限控制、工作流自动化等功能。

每日出拳老爷子的博客 556

jquery 服务器请求

jquery 服务器请求 jquery 服务器请求 1.什么是AJAX? 异步通信 回调函数 同步通信 2.XML 可扩展标记语言 3.XSD(引用了一个类库 命名空间) 各种类型的编程语言报文都可以转化XSD格式 4.WSDL(针对一个接口(大型项目中间件接口所用)) 加上了各种格式校验的XSD (非空校验,日期格式校验,入参字段顺序) 5.UDDI 由多个WSDL 组成了一个UDDI 2.HTML 超文本标记语言 相对与XML 它的标签都是固定的,由特定含义 3.JSON

weixin_55685021的博客 606

【C2000系列DSP的Bootloader详解】如何利用脚本自动合并Bin文件

本文通过OutconvertBin.py实现了 C2000 Bootloader+UserApp 的「ELF 转 BIN+BIN 合并」全流程自动化,核心优势如下: 架构适配:严格遵循 C28x 16 位大端格式,生成的 BIN 文件可直接烧录; 自动化程度高:一键完成清理、转换、合并,无需手动执行多个命令; 可追溯性:生成 CRC32 校验值,便于验证文件完整性; 量产友好:合并后的merged.bin支持一次性烧录,提升量产效率。

昔时扬尘处 183

jQuery $.ajax()通过本地服务器访问到远程服务器,解决远程问题。

$.ajax()是不能直接在自己的url属性中直接访问远程服务器的。 解决办法:1.在$.ajax()的data:{}中写入要远程访问的服务器地址,作为参数数据传递到本地服务器; 2.在$.ajax()的url写入本地服务器; 3.通过本地服务器file_get_contents访问到远程服务器。

sanshuiwang 9484

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

Jquery 的ajax访问服务器不进入success方法

最近在做一个小调试,发现ajax访问服务器时,访问成功了,可是每次都跳进error方法。 然后改变在ajax中,改变dataType:"html" 原来为“json” ,因为服务端的代码设置如下: response.setContentType("application/json;charset=UTF-8"); response.setHeader("Pragma", "No-cache

klx502的专栏 1906

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

怎样屏敞ajax.php的访问,关于jquery:仅允许通过本地服务器上的ajax访问PHP文件

我有一个网站需要根据用户交互增加数据库中的值。 当用户单击一个按钮时,会调用php脚本来增加该值。 我想保护这个脚本不被外部脚本访问。 目前,用户可以使用javascript函数编写自己的网页,该函数反复点击相同的php文件以炸毁数据库中的值。这是我的jquery代码,用于递增:jQuery(function(){$('.votebtn').click(function(e){var mynum ...

weixin_39578674的博客 189

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

jQuery $.ajax()直接远程跨域访问服务器报错

解决$.ajax()不能远程跨域访问服务器,以及不能跨域访问报出的错误。

sanshuiwang 1138

通过jQuery ajax访问后台action,在自己本地运行没问题但放到远程服务器后每次请求都是Aborted

处理jQuery Ajax访问后台Action请求被Aborted的问题

conleyfree的博客 4070

www.78ajax,ajax跨域访问 JQuery 的跨域方法

JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点;有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定。今天2013年8月2日又抽时间整理了下,修改了优化在线调用的方法。其实跨域有两种思路,思路一:就是通过js跨域访问;思路二:是通过后台写代码访问...

weixin_35847422的博客 1万+

jquery ajax跨域访问

基于Jquery的Ajax跨域访问 单点登录服务器(sso服务器) 令牌认证服务器(令牌服务器)   登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录, 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题。 ...

lumingming1987的博客 228

jquery.Ajax跨域访问数据方法

首 页 阅览室 馆友 我的图书馆 JQuery.Ajax跨域访问数据方法 收藏人:taohongyong 2014-09-24 | 阅:  转

zhanglong_longlong的专栏 1139

使用Google的CDN JQuery库

使用Google的CDN JQuery库 CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘",使用户可 以就近取得所需的内容,解决In...

anerlu8246的博客 185

如何把php项目部署到阿里云服务器window server2012__含公网ip访问时jquery/ajax失效解决办法

记一次蛋疼的折腾。 弄了一晚上最后发觉是360浏览器的问题,换个浏览器就好了。垃圾360用什么IE7文档模式。导致界面和功能失效。 建议大家测试的时候用firefox或者chrome。 项目部署到服务器后360浏览器兼容模式显示错误的解决办法:http://www.cnblogs.com/zj917/p/6697724.html ——————————————————————————————————

sajiazaici的博客 1210

jquery

在实际项目中,我们还可以使用google提供的CDN内容分发网络来加载jQuery库文件,这样既能大大节省服务器的带宽,又能加快客户访问网站的速度。此时引入jQuery库文件的代码需改变为: <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"type="text...

weixin_34124577的博客 76

jQuery实现静态html+ajax请求访问MySQL数据库并显示

文章目录静态html+ajax与jspajax访问流程图前期准备配置jQuery准备index.html准备dao准备servletjQuery实现ajax附:关于Maven项目引入js无法使用的问题 静态html+ajax与jsp 为什么要使用ajax请求,而不用jsp的el表达式和jstl方便的得到数据呢? 优点一: 前后端分离 jsp是一种早期的技术,它将前后端杂糅在一起,html和jav...

Koorye今天自学了吗 9879

ajax+jsonp+跨域+报错,浅谈JQuery+ajax+jsonp 跨域访问

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。一. 客户端Insert title here$(function(){/*//简写形式,效果相同$.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?"...

weixin_36009977的博客 323
上一篇: java爬取图片
下一篇: js和jstl显示表格数据servlet
caststudy
博客等级 码龄19年 181粉丝 107原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值