主页 / 问题 / 655686
Accepted
Bim Bam
Asked:2020-04-19 20:42:21 +0000 UTC2020-04-19 20:42:21 +0000 UTC

为什么 preventDefault 不起作用？

  • 772

有一个 html 表单，用户可以在其中更改他的数据：

 <form action='/user/editProfile' id="edit-profile_form" method="post">
<ul class='profile-data'>
    <li class='profile-data_item persona-icon'>Никнейм: <input id='profile_nickname' name='nickname' type="text" placeholder="Никнейм:" value="{{myNickname}}"   :readonly="inputStatus == 1 ? true : false"></li>
    <li class='profile-data_item'>Имя: <input name='name' id='profile_name' type="text" placeholder="Имя:" value="{{myName}}"  :readonly="inputStatus == 1 ? true : false"></li>
    <li class='profile-data_item'>Фамилия: <input name='surname' id='profile_surname' type="text" placeholder="Фамилия:" value="{{mySurname}}"  :readonly="inputStatus == 1 ? true : false"></li>
    <li class='profile-data_item b-day-icon'>Возраст: <input name='age' id='profile_age' type="text" placeholder="Возраст:" value="{{myAge}}"  :readonly="inputStatus == 1 ? true : false"></li>
    <li class='profile-data_item place-icon'><input type="text" name='city' id='profile_city' placeholder="Город" value="{{myCity}}"  :readonly="inputStatus == 1 ? true : false">, <input name='country' id='profile_country' type="text" placeholder="Страна" value="{{myCountry}}"  :readonly="inputStatus == 1 ? true : false"></li>
    <li class='profile-data_item phone-icon'>Телефон: <input name='phoneNumber' id='profile_phoneNumber' type="text" placeholder="Телефон:" value="{{myPhoneNumber}}"  :readonly="inputStatus == 1 ? true : false"></li>
    <input type="hidden" name="_csrf" value='{{csrfToken}}' />
    <input type="submit" value="Submit" id="edit-profile_submit">
</ul>
</form>
以及应该将数据发送到服务器的 jquery/ajax 代码。

$("form").submit(function(e) {
        e.preventDefault();
        var csrf_token = {{csrfToken}};

        $("body").bind("ajaxSend", function(elm, xhr, s){
            if (s.type == "POST") {
                xhr.setRequestHeader('X-CSRF-Token', csrf_token);
            }
        });

        var pathname = window.location.href;
        $.ajax({
            type: "POST",
            url: '/user/editProfile',
            data: {
                name: $("#profile_name").val(),
                nickname: $("#profile_nickname").val(),
                surname: $("#profile_surname").val(),
                country: $("#profile_country").val(),
                city: $("#profile_city").val(),
                phoneNumber: $("#profile_phoneNumber").val(),
                age: $("#profile_age").val()
            },
            dataType: "html",
            contentType: "application/html, charset: UTF-*",
            success: function(data){
                console.log(data);
            },
        });
    });

但由于未知原因，当您单击提交时，该站点会跟随在 action='' 中指定的链接。由于某种原因 preventDefault 没有做它应该做的事情。问题是什么？版本 jquery 3.1.0，在服务器上，表单由代码处理...

router.post('/editProfile', isLoggedIn, function (req, res, next){
    var id = req.user._id;
    console.log(req.body);
    var nickname = req.body.nickname;
    var name = req.body.name;
    var surname = req.body.surname;
    var age = req.body.age;
    var city = req.body.city;
    var country = req.body.country;
    var phoneNumber = req.body.phoneNumber;

    User.findByIdAndUpdate(id, { $set: { nickname: nickname, name: name, surname: surname, age: age, city: city, country: country, phoneNumber: phoneNumber }}, function (err, user) {
        if (err) return handleError(err);
        console.log("ADDED!!!!!!!!!!!!!");
    });
});

结果，提交了表单并将新数据输入到数据库中，但是重新加载了页面，尽管我不需要它。
所有操作都发生在页面 /user/:userid

javascript

3 个回答

  1. Best Answer

    如果碰巧你preventDefault没有中断通过 向服务器发送数据submit，那么你可以添加一个额外的检查：

    e.preventDefault();
if(!e.isDefaultPrevented()){
    e.returnValue = false;
}

    此外，为了不提交表单，在处理程序内部编写就足够了，或者更确切地说在函数内部，最后，写return false;. 如果函数返回false，则不会提交，如果true提交表单。

    preventDefault例如，可能无法工作，因为有其他处理程序从表单发送数据。对于这种情况，您可以尝试调用stopImmediatePropagation而不是preventDefault. 就是这样：

    e.stopImmediatePropagation(); // вместо e.preventDefault();

    无论如何，这是代码：

    $("body").bind("ajaxSend", function(elm, xhr, s){
if (s.type == "POST") {
        xhr.setRequestHeader('X-CSRF-Token', csrf_token);
    }
});

    您bind将"body"事件处理程序设置为ajaxSend，它会在每次发送 Ajax 请求之前触发，并且setRequestHeader- 设置请求标头的值HTTP。问题很可能出在这里并且它preventDefault有效，但另一个处理程序在preventDefault. 那么，有问题的代码行是这样的：

    var csrf_token = {{csrfToken}};
    • 5

  2. 什么来到浏览器而不是这一行？

    var csrf_token = {{csrfToken}};

    你可能需要：

    var csrf_token = "{{csrfToken}}";
    • 2
    1. 您的表单中已经有一个隐藏的输入 _csrf，为什么要在标题中再次提交它？

    2. csrf 应该这样存储： 

      <meta name="csrf" content="{{csrfToken}}">

      并像这样： 

      var _token = $('meta[name="csrf-token"]').attr('content');

    3. 改变：

      data: {
    name: $("#profile_name").val(),
    nickname: $("#profile_nickname").val(),
    surname: $("#profile_surname").val(),
    country: $("#profile_country").val(),
    city: $("#profile_city").val(),
    phoneNumber: $("#profile_phoneNumber").val(),
    age: $("#profile_age").val()
},

      在：

      var toSend = $(this).serializeArray(); // перед вызовом ajax, здесь будут все ваши данные с формы, с абсолютно такими же значениями

$.ajax({
// ...
    data: toSend,
// ...
});

    4. 这段代码对我有用，但我知道你使用的是刀片，很可能问题出在这一行：

       var csrf_token = {{csrfToken}};

      尝试更改为： 

       var csrf_token = '{{csrfToken}}';
    • 2

相关问题