Question

对于作业，我需要有一个由通过AJAX GET请求从服务器获取的JSON数据组成的表。此外，我还需要一个额外的行才能填写一些额外的数据，这些数据必须添加到我发出AJAX GET请求的服务器上，我是通过使用AJAX POST请求来完成的。这两件事我都能做到，所以我现在有一个表格，显示来自服务器的数据，你也可以添加数据。但问题是，当我点击“提交”时，按钮另一个页面将加载显示为添加的数据到服务器的新URL。我只想将数据添加到表中，而无需打开新页面。我在＆lt; form＆gt;上看到了一些答案。标签，但因为我必须使用＆lt; form＆gt;标签我不能在里面使用另一个。如何通过使用＆lt; input＆gt;来实现这一点。标签和按钮？

这是我用于填写您自己的数据行的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;
    });
});

Answer 1

您必须使用

阻止表单提交

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

Answer 2

添加

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

Answer 3

您可以通过阻止默认行为来确保表单实际上没有提交给“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)
    }
})

尝试类似这样的事情，你可以在服务器端获得echo JSON数据，所以在PHP中你可以添加结果：

echo $jsonizedData;
die();

所以在消息中，现在你将从php文件中恢复json数据

Answer 4

我能够（通过熟人的大量帮助）通过使用此代码来解决这个问题：

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

提交表单

4 个答案: