响应id事件js和js获取input输入值及ajax的data、error属性解释

最新推荐文章于 2022-08-28 12:40:22 发布

FromNowOnUntilTheEnd

最新推荐文章于 2022-08-28 12:40:22 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX 文章标签：响应id事件 ajax怎么写 js获取input值

本文链接：https://blog.youkuaiyun.com/qq_36688143/article/details/79447211

AJAX 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Ajax发送登录请求并处理返回结果。重点讲解了前端JavaScript与后端交互的具体步骤，包括通过点击事件获取输入框值、设置请求数据、处理成功及失败回调等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上解释：

① $("#xxx").click(function(){ ... } ); : xxx为id的值

$("#xxx").val() : 获取input框的输入值

② data: 就算为空也要传{}

{ name2:name,password2:password } : name 为js获取到的值，name2为后台方法中对应的值，获取方式

login(HttpServletRequest request,String name2, String password2){}

1) name2即为前台js中传的值

2) request.getParameter("name2")

③ error：function (XMLHttpRequest, textStatus, errorThrown){} 释义：这是一个 Ajax 事件。(默认: 自动判断 (xml 或 html)) 请求失败时调用时间。

参数有以下三个：

XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象：
XMLHttpRequest.readyState: 状态码的意思
0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了

如果发生了错误，错误信息（第二个参数）除了得到null之外，textStatus的可能值: "timeout", "error", "notmodified" 和 "parsererror"。

发送error可能有下面两种引起的，或者其他程序问题。
1、data:"{}", data为空也一定要传"{}"；不然返回的是xml格式的，并提示parsererror。

2、parsererror的异常和Header 类型也有关系。即编码header('Content-type: text/html; charset=utf8');

    <script th:inline="javascript">
		$("#loginNow").click(function(){
			var name = $("#name").val();
			var password = $("#password").val();
			//发送ajax请求修改员工数据
			$.ajax({
				url:"login",
				data:
				{name:name,password:password},
				type:"post",
				success:function(msg){
					console.log(msg);
					if (msg.code == 100) {
						window.location.href = "mkdirs";
						//刷新当前页
	     				//window.location.href = window.location.href.replace(/#/g,'');
					} else {
						 $('#prompt').text(msg.map.loginPrompt);  
					}
				 },
				 error:function(XMLHttpRequest, textStatus, errorThrown) {
					 alert(XMLHttpRequest.status);
					 alert(XMLHttpRequest.readyState);
					 alert(textStatus);
				 }
				
	 		}); 
		});
	</script>