Question

我想使用功能

$.("#SomeId").submit(function(e){});

但更喜欢这个

function changePassword(e, url){}

我想发表Ajax请求，但我无法使用

e.preventDefault()

此时我得到了这段代码。它不起作用，表单仍然提出请求

function changePassword(url){
    const data = $(this).serializeArray();
    this.submit(function(e){
        e.preventDefault();
        $.post({
            url: url,
            data: data,
            success(response){
                switch(response){
                    case 'doesntMatch':
                        Materialize.toast(`Die Passwörter stimmen nicht überein.`, 3000, "red");
                        break;
                    case 'success':
                        Materialize.toast(`Die Änderung des Passwortes war erfolgreich!`, 3000, "green");
                        break;
                    case 'logout':
                        window.location.href = "/logout";
                        break;
                    case 'toShort':
                        Materialize.toast(`Das angegebene Passwort ist zu kurz. Es muss mindestens acht Zeichen lang sein`, 3000, "red");
                        break;
                    default:
                        Materialize.toast(`Serverfehler`, 3000, "red");
                        break;
                }
            },
            error(err){
                console.log(err);
            }
        });
    });


}

我的HTML部分是这个

    <form id="changePw" onsubmit="return changePassword('/admin/changepw')">

我可能会改变什么？

Answer 1

使用表单的onsubmit属性在提交时调用函数的事实意味着您不需要在javacript中设置表单处理程序。（这将使用$(form).submit(myfunction) btw完成，而不是form.submit() ，表格submit method不带任何参数。）

您需要将上下文（表单）作为第二个参数传递，因为当使用onsumbit属性处理提交时，this将在函数中脱离上下文。

现在，您只需要从处理程序返回false，它将阻止表单提交。

<form id="changePw" onsubmit="return changePassword('/admin/changepw', this)">

function changePassword(url, form) {
  const data = $(form).serializeArray();
  $.post({
    url: url,
    data: data,
    success(response) {
      switch (response) {
        case 'doesntMatch':
          Materialize.toast(`Die Passwörter stimmen nicht überein.`, 3000, "red");
          break;
        case 'success':
          Materialize.toast(`Die Änderung des Passwortes war erfolgreich!`, 3000, "green");
          break;
        case 'logout':
          window.location.href = "/logout";
          break;
        case 'toShort':
          Materialize.toast(`Das angegebene Passwort ist zu kurz. Es muss mindestens acht Zeichen lang sein`, 3000, "red");
          break;
        default:
          Materialize.toast(`Serverfehler`, 3000, "red");
          break;
      }
    },
    error(err) {
      console.log(err);
    }
  });
  return false;
}

Javascript将Event作为参数

1 个答案: