Javascript 如何确保提交表单时不显示其他（新）页面

对于分配，我需要一个由JSON数据组成的表，这些数据通过AJAX GET请求从服务器获取。此外，我还必须有一个额外的行来填充一些额外的数据，这些数据必须添加到我发出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);
    }
  });
});

$（函数func（json）{
var url='%url%'
$.ajax({
键入：“获取”，
url:“%url%”，
数据类型：“jsonp”，
});
$.getJSON（url，
功能（数据）{
var-tr；
对于（变量i=0；i

我希望我已经提供了足够的信息，并提前感谢您的帮助：）

编辑：

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

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

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

var url='%url%
var tabinithtml=''；
函数fillTable（）{
$（'#table_one'）.html（tabinithtml）；
$.getJSON（url，
功能（数据）{
var-tr；
对于（变量i=0；i

您必须使用

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

---

您必须使用

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

加上

return false; 

在函数结束之前

例如：

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

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

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

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

功能（数据）{
var-tr；
对于（变量i=0；i

只需添加

return false; 

在函数结束之前

例如：

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

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

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

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

功能（数据）{
var-tr；
对于（变量i=0；i

通过防止默认行为，您可以确保表单不会真正提交到“url给定”，但您必须使用js/jquery对表单执行任何操作

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

尝试这样做，您会在服务器端获得echo JSON数据，因此在PHP中添加以下结果：

echo $jsonizedData;
die();

---

因此，在消息中，现在您将从php文件返回json数据，您可以通过防止默认行为来确保表单不会真正提交到“url给定”，但您必须使用js/jquery对表单执行任何您想要的操作

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

尝试这样做，您会在服务器端获得echo 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;
    });
}); 

var url='%url%
var tabinithtml=''；
函数fillTable（）{
$（'#table_one'）.html（tabinithtml）；
$.getJSON（url，
功能（数据）{
var-tr；
对于（var i=0；i

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

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

var url='%url%
var tabinithtml=''；
函数fillTable（）{
$（'#table_one'）.html（tabinithtml）；
$.getJSON（url，
功能（数据）{
var-tr；
对于（var i=0；i