如何确保提交表单时未显示另一个(新）页面

How to make sure another (new) page is not shown when submitting a form

本文关键字：显示 页面 另一个 提交 何确保 确保 表单      更新时间：2023-09-26

对于赋值，我需要有一个由通过AJAX GET请求从服务器获取的JSON数据组成的表。此外，我还必须有一个额外的行才能填写一些额外的数据，这些数据必须添加到我发出 AJAX GET 请求的服务器中，我通过使用 AJAX POST 请求来做到这一点。这两件事我都能够做到，所以我现在有一个表格，显示来自服务器的数据，你也可以向其中添加数据。但问题是，当我单击"提交"按钮时，将加载另一个页面，显示为添加到服务器的数据而制作的新URL。我只想将数据添加到表中，而不打开新页面。我已经看到一些带有

标签的答案，但由于我必须使用 标签，所以我不能在里面使用另一个标签。如何使用<输入>标签和按钮来实现这一点？

这是我在 HTML 中的代码，用于填写您自己的数据。

    <tr>
      <td rowspan="1" colspan="1">
      <input type="text" name="name" placeholder="Name" required="">
      </td>
      <td rowspan="1" colspan="1">
      <input type="text" name="category" placeholder="Category" required="">
      </td>
      <td rowspan="1" colspan="1">
      <input type="number" name="amount" min="1" placeholder="Amount" required="">
      </td>
      <td rowspan="1" colspan="1">
      <input type="text" name="location" placeholder="Location" required="">
      </td>
      <td rowspan="1" colspan="1">
      <input type="date" name="date" min="2000-01-02" required="">
      </td>
    </tr>
  </tfoot>
  </table>
  <input type="submit" value="Submit" id="submit">
</form>

这是 JavaScript 中用于将数据从服务器添加到表中的代码：

$(function func(json) {
  var url = '%url%'
  $.ajax({
    type: "get",
    url: '%url%',
    dataType: "jsonp",
  });
  $.getJSON(url,
  function(data){
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].name + "</td>");
        tr.append("<td>" + data[i].category + "</td>");
        tr.append("<td>" + data[i].amount + "</td>");
        tr.append("<td>" + data[i].location + "</td>");
        tr.append("<td>" + data[i].date + "</td>");
      $('#table_one').append(tr);
    }
  });
});

我希望我提供了足够的信息，并提前感谢您的帮助:)

编辑：

我编辑了代码来解决这个问题，现在看起来像这样：

var url = '%url%
var tabinithtml = '';
function fillTable() {
$('#table_one').html(tabinithtml);
    $.getJSON(url,
        function(data){
        var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].name + "</td>");
            tr.append("<td>" + data[i].category + "</td>");
            tr.append("<td>" + data[i].amount + "</td>");
            tr.append("<td>" + data[i].location + "</td>");
            tr.append("<td>" + data[i].date + "</td>");
            tr.sort
            $('#table_one').append(tr);
        }
    });
}
function insertRecord() {
    $.post( url, $( "#form" ).serialize()
    );
}
$( document ).ready(function() {
    tabinithtml = $('#table_one').html();
    fillTable();
    $('#form').submit(function(e) {
        e.preventDefault();
        insertRecord();
        fillTable();
        return false;
    });
});

您必须通过使用

$("form").submit(function(){ return false; });

只需添加 

return false;

在函数结束之前

例如：

function(){
  //all function srcripts
  return false;
}

在您的情况下，它应该是这样的：

function(data){
var tr;
for (var i = 0; i < data.length; i++) {
  tr = $('<tr/>');
  tr.append("<td>" + data[i].name + "</td>");
  tr.append("<td>" + data[i].category + "</td>");
  tr.append("<td>" + data[i].amount + "</td>");
  tr.append("<td>" + data[i].location + "</td>");
  tr.append("<td>" + data[i].date + "</td>");
  $('#table_one').append(tr);
   return false;
}
您可以通过

阻止默认行为来确保表单实际上不会提交到"URL given"，但是您必须使用JS/jQuery对表单执行任何操作。

$('#form').submit(function(e){
    e.preventDefault();
    //do your stuff here
    $.ajax(){
        url: '%url%',
        method: 'POST',
        data: {datafromform}
    }.success(msg){
        console.log(msg)
    }
})

尝试这样的事情，您会在服务器端获得回显 JSON 数据，因此在 PHP 中您添加的结果：

echo $jsonizedData;
die();

所以在消息中，现在您将从 PHP 文件中返回 JSON 数据

我已经能够使用以下代码解决此问题：

var url = '%url%
var tabinithtml = ''; 
function fillTable() { 
$('#table_one').html(tabinithtml);
$.getJSON(url,
    function(data){
    var tr;
    for (var i = 0; i < data.length; i++) { 
        tr = $('<tr/>');
        tr.append("<td>" + data[i].name + "</td>");
        tr.append("<td>" + data[i].category + "</td>");
        tr.append("<td>" + data[i].amount + "</td>");
        tr.append("<td>" + data[i].location + "</td>");
        tr.append("<td>" + data[i].date + "</td>");
        tr.sort
        $('#table_one').append(tr);
        }
    });
}
function insertRecord() { 
$.post( url,
    $( "#form" ).serialize()
    );
}
$( document ).ready(function() {
tabinithtml = $('#table_one').html();
fillTable();
$('#form').submit(function(e) {
    e.preventDefault();
    insertRecord(); 
    fillTable();
    return false;
    });
});
相关文章：