CNode

nodejs与ajax交互,alert返回数据失败

问答
Zzhouyix发布于11 年前最后回复11 年前4 回复5218 浏览0 收藏

渲染模板采用ejs

$(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);  
            }
        });
  });

});

<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="提交"/>
</form>

希望提交后,name的值为我返回的数据 nodejs后台为

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}); } }); 点击只会跳转到显示{message:1}的页面,不能返回到原来的页面,并且弹出alert 应该怎么改呢

查看回复

回复 (4)

K
kiliwak#1·11 年前

因为你的submit是在form里, 点击后, 实际上走的是form action, 自然就会跳转页面咯. 试试在click时加上e.prevDefault()e.stopPropagation()

Z
zhouyix#2·11 年前
引用 kiliwak因为你的submit是在form里, 点击后, 实际上走的是form action, 自然就会跳转页面咯. 试试在click时加上e.prevDefault()和e.stopPropagati...

@kiliwak 我把form的提交去掉后就好了,谢谢。我有个疑问就是 如果form表单中有action,然后表单中的提交按钮onclick方法又是ajax跳转到不同页面,那点击时如何跳转呢

L
lankeren#3·11 年前
引用 zhouyix@kiliwak 我把form的提交去掉后就好了,谢谢。我有个疑问就是 如果form表单中有action,然后表单中的提交按钮onclick方法又是ajax跳转到不同页面,那点击时如何跳转呢

@zhouyix 1楼已经告诉你答案了,不过应该是e.preventDefault()吧:$(“#submit”).click(function(e){ e.preventDefault();.... },在ajax的回调函数里执行跳转就可以了

T
Tei320#4·11 年前

type=submit ==> type=button res.json( { success: { message:1 } } );

参与回复
登录后即可参与回复。登录