ajax和nodejs结合的一个疑问点
发布于 2天前 作者 zhouyix 191 次浏览 来自 问答

情况是这样的:希望点击按钮后,页面不跳转,但是输入框的值变为后台返回的值 开始采用表单,点击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

5 回复

: 表单提交url和ajax提交同时存在的话,优先级是怎样的 这个不是问题,没有同时提交的情况。 非要同时提交的话,优先级是一样的,都是 POST

事件执行最后return false;

像表单、href链接这种东西都有浏览器默认行为,表单的默认行为就是提交表单,href的默认行为就是跳转链接,如果这些默认行为不是你期望的操作,你应该调用preventDefault()方法来阻止浏览器的默认行为,在jQuery中的事件处理函数中最后返回false可达到相同目的。

你应该调用preventDefault()方法来阻止浏览器的默认行为,在jQuery中的事件处理函数中最后返回false可达到相同目的。+1

type="submit"改为type="button"

回到顶部