情况是这样的:希望点击按钮后,页面不跳转,但是输入框的值变为后台返回的值 开始采用表单,点击button时,采用ajax方法,但结果一直跳转到显示json数据的页面 后来去掉了表单,成功 有以下几个问题不太懂 1.表单提交url和ajax提交同时存在的话,优先级是怎样的,这个结果貌似说明form的优先 2.表单提交不写action不是表示在当前页,可为什么最终会跳转到下图这样的页面
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="/javascripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
var params ={
name: $("#name").val(),
password: $("#password").val()
};
$.ajax({
data: params,
url: '/',
type:'post',
dataType: 'json',
success: function(data){
//var data = $.parseJSON(data);
$("#name").val(data.message);
alert(data.message);
},
error: function(jqXHR, textStatus, errorThrown){
alert('error ' + textStatus + " " + errorThrown);
}
});
});
});
</script>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<!--<form method="POST"> -->
<input type="text" id="name"/>
<input type="text" id="password"/>
<input type="submit" id="submit" name="提交">提交</button>
<!-- </form>-->
</body>
</html>
后台
router.get('/', function(req, res, next) {
res.render('index',{title:"ajax test"});
});
router.post('/',function (req,res){
console.log(req.body);
if(req.body.name!=''&& req.body.password!=''){
res.json({message:1});
}
});
: 表单提交url和ajax提交同时存在的话,优先级是怎样的 这个不是问题,没有同时提交的情况。 非要同时提交的话,优先级是一样的,都是 POST
事件执行最后return false;
像表单、href链接这种东西都有浏览器默认行为,表单的默认行为就是提交表单,href的默认行为就是跳转链接,如果这些默认行为不是你期望的操作,你应该调用preventDefault()方法来阻止浏览器的默认行为,在jQuery中的事件处理函数中最后返回false可达到相同目的。
你应该调用preventDefault()方法来阻止浏览器的默认行为,在jQuery中的事件处理函数中最后返回false可达到相同目的。+1
type="submit"改为type=“button”
1.通过submit发送一个请求,又何必用ajax发送一个相同的请求,而且发送都放送到当前页。。。个人认为并没有优先级可言,先到先接受 2.没出现当前页的原因是: -----第一个通过submit发送的POST请求会发送到当前页(即action当前页得到了一个GET请求),所以再次渲染当前页。 -----第二个ajax发送POST请求并没有get,页面自然变成了json
大学狗个人看法,有错望指正~