防止发布后重定向答案

【问题标题】：Prevent redirecting after post防止发布后重定向
【发布时间】：2018-01-25 23:31:34
【问题描述】：

问一个已经有多个答案和多次的问题可能是个坏主意，但无论如何我应该问它。我几乎尝试了在那里找到的所有东西Prevent redirect after form is submitted，但没有任何帮助。有一个小细节，我看不到。我对 jQuery 和 AJAX 不是很熟悉。尤其是前者。所以，代码：

<form id="form" action="uploadfile.php" method="post" enctype="multipart/form-data"  ><!--action="uploadfile.php" onsubmit="return false;" -->
    <label>Name</label>
    <input id="username" name="username" type="text" onblur="checkUsername(this.value)" onkeypress="clearError('nameerror')" oninput="clearError('nameerror')" /><br>
    <label id="nameerror"></label><br>
    <label>Email</label>
    <input id="email" name="email" type="text" onblur="validateEmail(this.value)" onkeypress="clearError('emailerror')"/><br>
    <label id="emailerror"></label><br>
    Select a file<br />
    <label id="draganddroperror"></label><br>
    <input name="fileToUpload[]" id="fileToUpload" type="file" onchange="onChange(event)" multiple /><br />
    <button id="btnSubmit" onclick="sendData()"  style="background-color: gray; color: #ffffff;" />Отправить</button>
</form>

有我的JS

function sendData() {
    var file_data = $("#fileToUpload").prop("files");
    console.log(file_data);
    if ($("#file_data").val() != "") {
        var form_data = new FormData();
        //form_data.append('file', file_data);
        //console.log(file);
        form_data.append('file', file_data);
        console.log(form_data);
        $.ajax({
            url: 'uploadfile.php', // point to server-side PHP script
            dataType: 'text', // what to expect back from the PHP script, if anything
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(data) {
                // get server responce here
                //alert(data);
                // clear file field
                //$("#your-files").val("");
                return false;
            }
        });
        return false; //event.preventDefault();
    } else {
        alert("Please select file!");
    }
}

所以，这是有问题的代码。除重定向外，所有工作都完美无缺。另一个问题包含提交，但我没有提交输入。我试图将表单与 post 方法（第一行）断开，但出现服务器错误。到处都返回 false。我在这个问题上花了无数个小时，这几天几乎耗尽了我所有的夜间时间。我会很感激任何帮助，谢谢。

【问题讨论】：

你的return false不应该在else子句之后吗？
我不这么认为。 else 子句不发布任何内容。
<button> 的点击事件本身就是一个post 动作。
我想你不明白为什么你会返回 false。你基本上没有在你引用的那篇文章中尝试过任何东西。我没有看到您阻止对事件的默认操作（您没有费心将其传递给单击处理程序）。我也没有看到您返回 false 来阻止默认操作。
当您的表单中没有<button type="submit"></button> 时，每个按钮都充当type="submit"

标签： javascript jquery ajax forms

【解决方案1】：

防止表单提交的技巧是return false onsubmit 如下：

<form id="form" onsubmit="return sendData()" method="post" enctype="multipart/form-data">
    <!--action="uploadfile.php" onsubmit="return false;" -->
    <label>Name</label>
    <input id="username" name="username" type="text" onblur="checkUsername(this.value)" onkeypress="clearError('nameerror')" oninput="clearError('nameerror')" />
    <br>
    <label id="nameerror"></label>
    <br>
    <label>Email</label>
    <input id="email" name="email" type="text" onblur="validateEmail(this.value)" onkeypress="clearError('emailerror')" />
    <br>
    <label id="emailerror"></label>
    <br> Select a file
    <br />
    <label id="draganddroperror"></label>
    <br>
    <input name="fileToUpload[]" id="fileToUpload" type="file" onchange="onChange(event)" multiple />
    <br />
    <button type="submit" id="btnSubmit" style="background-color: gray; color: #ffffff;">Upload</button>
</form>

请注意，我写的是onsubmit=return sendData()。当sendData() 将返回true 时，表单将被提交，否则将永远不会被提交。为此，sendData() 中的最后一条语句是return false;。这样，表单永远不会在当前窗口中提交，而只有 Ajax 提交工作。

function sendData() {
  var file_data = $("#fileToUpload").prop("files");
  console.log(file_data);
  if ($("#file_data").val()) {
    var form_data = new FormData();
    //form_data.append('file', file_data);
    //console.log(file);
    form_data.append('file', file_data);
    console.log(form_data);
    $.ajax({
      url: 'uploadfile.php', // point to server-side PHP script
      dataType: 'text', // what to expect back from the PHP script, if anything
      cache: false,
      contentType: false,
      processData: false,
      data: form_data,
      type: 'post',
      success: function(data) {
        // get server responce here
        //alert(data);
        // clear file field
        //$("#your-files").val("");
      }
    });
  } else {
    alert("Please select file!");
  }
  return false;
}

我希望这能让你清楚地理解。

【讨论】：

我接受您的回答，因为它易于理解且易于复制。不过，我应该注意到，我的 JS、您的代码和我的 PHP 代码在后端的组合会破坏后端程序。它以某种方式向 PHP 发送空结构，当我从 PHP 收到一些警报时，后端程序无法正常工作。

【解决方案2】：

您想取消按钮触发的提交事件的默认事件处理程序。为此，您需要访问事件本身。最佳做法是完全从 JavaScript 处理按钮单击，而不是从 HTML 调用函数。

var submitButton = document.getElementById('btnSubmit');
submitButton.addEventListener('click', sendData);

// Then you will have access to the event in the sendData function
function sendData(ev) {
  ev.preventDefault();
  ...
}

Live example

一个稍微干净的方法是处理表单提交，但是这样做了。例如，这也可以通过点击 enter 键来捕获表单提交。

var form = document.getElementById('form');
form.addEventListener('submit', sendData);

Live example

【讨论】：

出现错误：无法读取 ev.preventDefault() 上未定义的属性“preventDefault”；行
您是否删除了 HTML onclick 属性并添加了提供的 Javascript 代码？
已删除。不是它不发布，尽管控制台中没有错误。添加了 Отправить 处理表单。
我的 Codepen 示例运行良好，所以我不知道您到底出了什么问题。您可以使用您当前拥有的代码制作一个 codepen，这样我就可以尝试找出您的错误.
它对我不起作用，无论是在 codepen 还是在本地。不要触发任何 console.log（我打开控制台）消息或警报（）。可能我只是累了。在两个代码笔上（第一个按钮单击，第二个输入按键）。

【解决方案3】：

在函数 sendData() 中你应该像这样传递事件参数

 function sendData(evt) {

 }

然后在这个函数中我们应该添加evt.preventDefault(); 来停止提交动作。希望对您有所帮助。

【讨论】：

【解决方案4】：

添加值为button的type属性就完成了：

<button id="btnSubmit" type="button" ...

默认type属性的值为submit，告诉浏览器提交from到服务器，如果改成button浏览器什么都不做，只能在按钮的时候绑定事件被点击了

【讨论】：