双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒,抽取你的专属好礼

— 惊喜奖品抢先看 —

$.ajax不发送请求,没有网络请求

蛋炒饭赛高 蛋炒饭赛高 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区

同一个网页下

<form class="form" id="a-form">
    <h2 class="form_title title">创建账号</h2>
	<div class="form_icons">
		<i class="iconfont icon-QQ"></i>
		<i class="iconfont icon-weixin"></i>
	</div>
	<span class="form_span">选择注册方式激活电子邮箱注册</span>
	<input type="text" class="form_input" placeholder="用户名" id="name1" name="name1" required>
	<input type="email" class="form_input" placeholder="电子邮箱" id="email1" name="email1" required>
	<button class="captcha" id="sendBtn">发送验证码</button>
	<input type="text" class="form_input" placeholder="邮箱验证码" id="code1" name="code1" required>
	<input type="password" class="form_input" placeholder="密码" id="password1" name="password1" required>
	<button class="form_button button submit">注册</button>
</form>
<form class="form" id="b-form">
	<h2 class="form_title title">登入账号</h2>
	<div class="form_icons">
		<i class="iconfont icon-QQ"></i>
		<i class="iconfont icon-weixin"></i>
	</div>
	<span class="form_span">选择登录方式激活电子邮箱登录</span>
	<input type="email" class="form_input" placeholder="电子邮箱" id="email2" name="email2" required>
	<input type="password" class="form_input" placeholder="密码" id="password2" name="password2" required>
	<a class="form_link">忘记密码?</a>
	<button class="form_button button submit">登录</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
		// 发送验证码
		$("#sendBtn").click(function() {
			var email = $("#email1").val();
			$.ajax({
				url: "http://8.130.26.106:8080/users/code",
				type: "GET",
				data: {
					username: email
				},
				success: function(response) {
					alert("验证码已发送,请在邮箱查收!");
				},
				error: function(error) {
					alert("发送验证码失败!");
				}
			});
		});
		$("#a-form").submit(function(event) {
			event.preventDefault();
			var username = $("#name1").val();
			var email = $("#email1").val();
			var code = $("#code1").val();
			var password = $("#password1").val();
			console.log(code);
			$.ajax({
				url: "http://8.130.26.106:8080/register",
				type: "POST",
				async: false,
				data: JSON.stringify({
					"code": code,
					"password": password,
					"username": email
				}),
				success: function(response) {
				    console.log(response);
					alert("表单提交成功!");
				},
				error: function(error) {
				     console.log(error);
					alert("表单提交失败!");
				}
			});
		});
		$("#b-form").submit(function(event) {
			event.preventDefault();
			var email = $("#email2").val();
			var password = $("#password2").val();
			console.log(password);
			$.ajax({
				url: "http://8.130.26.106:8080/login",
				type: "POST",
				async: false,
				data: {
					"username": email,
					"password": password
				},
				success: function(response) {
					console.log(response);
					alert("表单提交成功!");
				},
				error: function(error) {
					console.log(error);
					alert("表单提交失败!");
				}
			});
		});
	});
</script>

发送验证码的请求是正常的,后面的注册和登录两个请求连网络请求都没有,接口也用postman试过了,都可以

 

 

 

...全文

相关推荐

JQuery中$.ajax()方法参数详解及应用

JQuery中$.ajax()方法想必大家并不陌生吧,在本文将为大家介绍下其参数及应用示例,感兴趣的朋友不要错过

weixin_38646902

为jquery的ajax请求添加超时timeout时间的操作方法

主要介绍了为jquery的ajax请求添加超时timeout时间的操作方法,文中通过一段简单的代码给大家介绍jquery ajax超时设置方法,感兴趣的朋友跟随脚本之家小编一起看看吧

weixin_38654415

jQuery中$.ajax()方法参数解析

主要为大家详细解析了jQuery中$.ajax()方法参数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

weixin_38683195

JS Ajax请求如何防止重复提交

好长时间没写js代码了刚好遇到这样的问题。我们系统多数表单没有做防止重复提交的。 由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说,还容易忘记做这个,同时,ajax也不好处理,需要提交失败的话同时返回新的token值。 所以我想在,js这边动手。其实以前和前端提过,久久不见动静,就只好弄块砖丢出去了。思路是,覆盖掉$.ajax,在这里面处理掉防止重复提交的问题,而前端的业务开发不受影响,不改代码,无感知。 我想架构的目的之一,就在于简化业务开发,屏蔽掉业务无关的细节,让一线开发安心写业务吧。 代码如下: /** * Cre

weixin_38656989

解决ajax请求后台,有时收不到返回值的问题

今天小编就为大家分享一篇解决ajax请求后台,有时收不到返回值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

weixin_38688145
评论 1
收藏 已收藏
分享
返回顶部
蛋炒饭赛高
Ajax 52,778 成员 25,334 内容