Question

提出一个已经多次回答多次的问题可能是一个坏主意，但无论如何我都应该问它。我尝试了很多我在那里找到的所有东西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方法（第1行）脱钩表单，但我收到了服务器错误。到处都是假的。我在这个问题上花了无数个小时，它几乎耗尽了我几个晚上的几个小时。我要感谢任何帮助，谢谢。

Answer 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;
}

我希望这能给你清楚的理解。

Answer 2

在函数sendData（）中，您应该像这样传递事件参数

 function sendData(evt) {

 }

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

Answer 3

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

    <div class='panel panel-primary'>
  <div class='panel-heading'>
    {{pageTitle}}
  </div>
  <div class='panel-body'>
    <div class='row'>
      <div class='col-md-2'>Filter by:</div>
      <div class='col-md-4'>
        <input type='text' [(ngModel)]='listFilter' />
      </div>
    </div>
    <div class='row'>
      <div class='col-md-4'>
        <h4>Filtered by: {{listFilter}} </h4>
      </div>
    </div>
        <div class='table-responsive'>
            <table class='table'
                   *ngIf='processList && processList.length'>
                <thead>
                    <tr>
                        <th>Process Name</th>
                        <th>Process Instance</th>
                        <th>Process Status</th>
                        <th>Temp-acked Messages Number</th>
                        <th>Unprocessed Messages Number</th>
                        <th>Deferred Messages Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let process of processlist | processFilter:listFilter" >
                        <td>{{ process.process_name }}</td>
                        <td>{{ process.instance  }}</td>
                        <td>{{ process.status }}</td>
                        <td>{{ process.tempacked_cmsg}}</td>
                        <td>{{ process.unprocessed_cmsg}}</td>
                        <td>{{ process.deferred_cmsg}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Live example

稍微更清晰的方法是处理表单提交，但这已经完成。这也可以通过点击 enter 键来捕获表单提交。

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

Answer 4

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

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

默认情况下，type属性的值为submit，告诉浏览器将from提交给服务器，如果将其更改为button，则浏览器将不执行任何操作，只能绑定单击按钮时的事件

邮寄后防止重定向

4 个答案: