Question

我有一个AJAX函数，它使用简单的select * ...将数据从数据库加载到div。该功能在没有提交的情况下工作正常，但是当我使用表单时，它不起作用且#itemContainer为空，我错过了什么吗？我甚至尝试过：

$(document).ready(function() {
  $("#myForm").submit(function() {

但也没有工作

我的代码：

<script id="source" language="javascript" type="text/javascript">
 $("#myForm").submit(function() {
   $.ajax({
     url: 'models/fetchUsers.php', //the script to call to get data
     dataType: 'json', //data format
     success: function(data) //on recieve of reply
       {
         $.each($(data), function(key, value) {
           $('#itemContainer').append(value.user_id);
         });
       }
   });
 });
</script>

Answer 1

您没有取消表单提交事件。

在提交

中添加preventDefault()

喜欢这个

$("#myForm").submit(function(event) {
  $.ajax({
    url: 'models/fetchUsers.php', //the script to call to get data
    dataType: 'json', //data format
    success: function(data) //on recieve of reply
      {
        $.each($(data), function(key, value) {
          $('#itemContainer').append(value.user_id);
        });
      }
  });
  event.preventDefault();
});

更新：

event.preventDefault()已被删除。

尝试使用return false;

喜欢这个

$("#myForm").submit(function(event) {
  $.ajax({
    url: 'models/fetchUsers.php', //the script to call to get data
    dataType: 'json', //data format
    success: function(data) //on recieve of reply
      {
        $.each($(data), function(key, value) {
          $('#itemContainer').append(value.user_id);
        });
      }
  });
  return false;
});

Answer 2

这是因为页面将在表单提交时重新加载。

处理提交事件并添加return false。

＆＃13;

<script id="source" language="javascript" type="text/javascript">
  $("#myForm").submit(function() {
    submitForm();
    return false;
  });

  function submitForm() {
    $.ajax({
      url: 'models/fetchUsers.php', //the script to call to get data
      dataType: 'json', //data format
      success: function(data) //on recieve of reply
        {
          $.each($(data), function(key, value) {
            $('#itemContainer').append(value.user_id);
          });
        }
    });

  };
</script>

＆＃13;

jQuery .append不会在.submit上工作

2 个答案: