ajax-登录获取昵称,密码,异步提交form

利用ajaxSubmit提交
html

<form action="login">
	<div class="box">
		<span>用户名</span><input type="text" name="un" class="un">
	</div>
	<br>
	<br>
	<div class="box">
		<span>密码</span><input type="text" name="pw" class="pw">
	</div>
	<br>
	<br> <input type="button" value="登录" class="butt">
</form>

js

在head里引入jq文件(注意顺序不可更改)

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQuery-form.js"></script>

异步提交
(将请求发送至后台,之后继续执行,不管发送的结果)

  $(function(){
    //异步提交
      $('.butt').click(function(){
      //button按钮点击时获取用户姓名与密码
    	  $('form').ajaxSubmit(function(data){
    		  //data返回值
    	  })
    })
    })

login.java(建立servlet)
在这里插入图片描述
在这里插入图片描述
在protected void中输入执行的代码
(getParameter()取到的是所填name对应的标签内的内容 )
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Java Web开发中,可以使用AJAX进行异步提交form表单,具体实现步骤如下: 1. 在JSP页面中添加form表单,设置id属性和action属性,例如: ``` <form id="myForm" action="submitForm.do" method="post"> <input type="text" name="username"> <input type="text" name="password"> <button type="submit">提交</button> </form> ``` 2. 在JSP页面中引入jQuery库,例如: ``` <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 3. 使用jQuery的$.ajax方法异步提交form表单,例如: ``` $(document).ready(function() { $('#myForm').submit(function() { $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: $(this).serialize(), success: function(data) { alert('提交成功'); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert('提交失败'); } }); return false; }); }); ``` 其中,$(this).serialize()方法可以将表单数据序列化为字符串,方便传递给后台处理。success和error回调函数分别处理提交成功和提交失败的情况。 4. 在Java后台代码中处理form表单数据,例如: ``` @RequestMapping(value="/submitForm", method=RequestMethod.POST) @ResponseBody public String submitForm(HttpServletRequest request) { String username = request.getParameter("username"); String password = request.getParameter("password"); // 处理表单数据 return "success"; } ``` 其中,@RequestMapping注解设置了请求路径和请求方法,@ResponseBody注解表示返回值直接作为响应体输出,不需要经过视图解析器处理。 通过以上步骤,就可以实现AJAX异步提交form表单了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值