写一个ajax请求出现的问题

发布时间:2020-08-01 15:11:34 作者:zhu7058958
来源:网络 阅读:375

    今天在写一个ajax请求的时候出现ajax请求成功后,页面居然会出现刷新,url有跳转,找了半天,终于发现了问题所在,原来我在表单里面有一个 <input type="button" onclick="submit()"/>元素,之前用的是表单提交的方式发送的请求,改成ajax请求后忘记删除,但是我好奇的是我在js里面写的submit()方法已经被删除了,怎么还会提交表单呢?
我仔细一看,原来button的onclick事件触发的submit()方法还是会提交表单,如果将该方法改一下名字,表单就不会提交了!。

 下面是我的jsp页面:                          

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
 <%@ include file="/jsp/meta.jsp" %>
 <title>登录页面</title>
</head>
<body>

    <form action="login/userLogin" method="post">

      用户名: <input type="text"  name="userName"    id="userName" /><span  id="user_message"></span> <br/>                
  密码:<input type="password" id="pwd" name="pwd"/><span id="pwd_message"></span> <br/>
  <span><button id="btn" onclick="submit()">登录</button></span>

</form>
</body>
</html>

<script type="text/javascript">
$(function(){
var oBtn =document.getElementById('btn');
//ajax请求获取用户登录信息
$(oBtn).click(function()
{
var login_message ={'userName':$("#userName").val(),'pwd':$("#pwd").val()};
$.ajax({
url:'<%=ctx%>/login/userLogin',
type:'post',
data:login_message,
//contentType: "application/json; charset=utf-8",
dataType:'json',
success:function(data){

console.log(JSON.stringify(data));
console.log(eval('('+data+')'));
var result= eval('('+data+')');

},
error:function(data){
console.log(JSON.stringify(data));
}

});
//oForm.submit=true;
});

});
</script>

推荐阅读:
  1. ajax请求
  2. history如何解决ajax出现的问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ajax 请求 button

上一篇:C++语言学习(二)——C++对C语言基础语法的扩展

下一篇:数据结构之完全二叉树——顺序存储结构(php代码实现)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》