写一个ajax请求出现的问题

今天在写一个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>

时间: 2024-11-18 22:58:50

写一个ajax请求出现的问题的相关文章

写一个ajax程序就是如此简单

写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发技术.     2:基于web标准XHTML+CSS的表示:     3:使用 DOM进行动态显示及交互:     4:使用 XML 和 XSLT 进行数据交换及相关操作:     5:使用 XMLHttpRequest 进行异步数据查询.检索: 程序员应用ajax的途经: 1:.Net下的Ajax

全局为每一个ajax请求都附带一个loading效果 .ajaxSend

描述: 在Ajax请求发送之前绑定一个要执行的函数,这是一个 Ajax Event. 添加的版本: 1.0.ajaxSend( handler(event, jqXHR, ajaxOptions) ) handler(event, jqXHR, ajaxOptions) 类型: Function() 被调用的函数. 每当一个Ajax请求即将发送,jQuery就会触发ajaxSend事件,在这个时间点所有处理函数都会使用.ajaxSend()方法注册并执行. 观察这种方法,建立一个基本的Ajax加

javascript 写一个ajax 自动拦截,并下载数据

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

jQuery框架中$.ajax()的常用参数有哪些?写一个post请求并带有发送数据和返回数据的样例

sync是否异步 url请求地址 contentType发送信息至服务器时内容编码类型 data发送到服务器的数据 dataType预期服务器返回的数据类型 type请求类型 success请求成功回调函数 error请求失败回调函数 $.ajax({ url: "/jquery/test1.txt", type: 'post', data: { id: 1 }, success: function(data) { alert(data); } }

javascript写的ajax请求

1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title></title> 5 <script type="te

监控页面所有 ajax请求

监控所有ajax请求: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决方案是,等其中一个结束以后,再发起另外一个,这个过程用回调函数来完成. 但是,如果其中一个ajax请求的代码不是你写,你改不了,怎么办? 又或者说,你只想知道某个url请求什么时候结束,不想管其他的请求,怎么弄? <!DOCTYPE html> <html lang="en"> <head> <meta charset

Ajax请求发送的FormData是&quot;[object object]&quot;

今天遇见一个ajax请求的问题,以前data直接传了一个json字符串,后来适应新需求将ajax的请求参数修改为对象的格式让ajax自动转换为json字符串.以下是两种ajax请求代码. //字符串格式 $.ajax({ url:"http://127.0.0.1/test", type:"post", dataType:"JSON", data:"{'param':'test'}", processData :false,

ssm项目之Ajax请求返还json解析

上一篇只适用于浏览器,但是我们客户端等的解析就麻烦了 所以用Ajax请求会比较好,以json发送给客户端 index.jsp直接发送ajax请求进行员工分页数据的查询,服务器返回json数据,然后浏览器使用js对json进行解析,通过dom增删改改变页面,这样就客户端无关性 导入jackson包 2.8.8 在EmployeeController.java中把RequestMapping("/emps") /** * 导入jackson包 * @param pn * @param mo

extjs ajax请求与struts2进行交互

sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示.现在有一个问题是struts2对于url的跳转action支 持比较良好,但是对于像Extjs这样,ajax请求的,无url跳转的实现,还是需要一点点技巧的.本文实例讲解一个Ext.Ajax.request 的请求实例,返回后台处理之后的结果. 步骤一:创建struts2的配置文件struts.xml <?xml version="1.0" encoding=&quo