ajax和nodejs结合的一个疑问点
情况是这样的:希望点击按钮后,页面不跳转,但是输入框的值变为后台返回的值 开始采用表单,点击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});
}
});
1111.jpg
6 回复
像表单、href链接这种东西都有浏览器默认行为,表单的默认行为就是提交表单,href的默认行为就是跳转链接,如果这些默认行为不是你期望的操作,你应该调用preventDefault()方法来阻止浏览器的默认行为,在jQuery中的事件处理函数中最后返回false可达到相同目的。