javascript - ajax post表单后url会自动改变？怎么不让url变化

问题描述

问 题

为什么url会发生变化，怎么让其不变？

提交前：localhost:3000/
提交后：localhost:3000/?user%5Bname%5D=%E5%A4%A7%E6%B4%92%E5%BA%97&user%5Bpassword%5D=

前台代码

$('#form-signup .btn-success').click(function () {

        // $(".form-signup").valid();
        var $$ = $('#form-signup');
        var data = $$.serializeArray();
        var postData = {};
      
        $.each(data, function (n, v) {
            postData[data[n].name] = data[n].value;  
        });
        console.log(postData);
        $.ajax({
            type: "POST",
            url: '/user/signup',
            dataType: 'json',
            data: postData,
            success: function (data) {
                var m = data['message'];
                if (m == 'username is exist') {
                    alert(JSON.stringify(data))
                }
            }
        })
        ;
    });

后台代码：

app.post('/user/signup', function (req, res) {
    var _user = req.body.user;
    User.find({name: _user.name}, function (err, user) {
       
        if (user) {
            res.send({message: "username is exist"});
        } else {
            var user = new User(_user);

            user.save(function (err, user) {
                if (err) {
                    console.log(err);
                }
                res.redirect('/admin/userlist');   
            });
        }
    })

解决方案

第一种

$('#form-signup').on('submit', function(ev) {
  ev.stopPropagation();
  ev.preventDefault();

  ...

});

第二种
还有就是form表单的那个button按钮注意下type

<button type="button">submit<button>

这样做虽然也可以阻止，但是不建议这么做，有碍于语义化和不能键盘enter操作

这篇关于javascript - ajax post表单后url会自动改变？怎么不让url变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！