Ajax不重新加载就不会发送数据答案

【问题标题】：Ajax not sending data without reloadAjax不重新加载就不会发送数据
【发布时间】：2013-05-14 21:23:01
【问题描述】：

下面的 ajax 脚本没有向 php 发送数据，页面只是重新加载，表单输入值被传递到 url。

脚本

<script>
  $("#addProducts").submit(function(event) {
     var str = $("addProducts").serialize();
     event.preventDefault();
     $.ajax({
        type: "POST",
        url: "subAddProduct.php",
        data:str
     })
  });
</script>

HTML 表单

<form enctype="multipart/form-data" id="addProducts">
...
</form>

【问题讨论】：

在 jquery 中查看手册以获取 ajax
.submit() 提交表单。请改用.click()。 Docs
尝试将event.preventDefault() 放在您的str 变量声明之上？
将提交按钮的类型从“提交”更改为“按钮”，然后在“onclick”事件中调用该函数
另外，您的表单序列化不正确...应该是 var str = $("#addProducts").serialize(); - 缺少表单 ID 中的 #

标签： php ajax jquery post

【解决方案1】：

您的代码中已经存在问题：$("addProducts").serialize(); 应该是 $("#addProducts").serialize();。

我刚刚进行了一些测试。问题是因为您尝试在文档准备好之前绑定您的函数。请用以下代码替换您的代码：

$(document).ready(function() {
    $("#form1").submit(function(event) {
         var str = $("#form1").serialize();
         event.preventDefault();
         $.ajax({
            type: "POST",
            url: "test.php",
            data: str
        });
    });
});

关于 Zeeshan Bilal 和 pvorb 所说的话，恐怕是假的。 submit() 是正确使用的函数（请参阅jQuery documentation）。

说明：将事件处理程序绑定到“提交”JavaScript 事件，或在元素上触发该事件。

【讨论】：

【解决方案2】：

也许您正试图在文档未准备好时绑定您的函数。

$(document).ready(function() {
 $("#addProducts").submit(function(event) {
 var str = $("addProducts").serialize();
 event.preventDefault();
 $.ajax({
 type: "POST",
 url: "subAddProduct.php",
 data:str
   })});

});

【讨论】：

不要复制粘贴。这是什么 $("addProducts")
$("addProducts") 应该是 $("#addProducts")

【解决方案3】：

<script>
  $("#addProducts").submit(function(event) {
     event.preventDefault();
     var str = $("#addProducts").serialize();
     $.ajax({
        type: "POST",
        url: "subAddProduct.php",
        data:str
     })
  });
</script>

HTML 表单

<form enctype="multipart/form-data" id="addProducts" action="">
...
<input type="submit" name="submit" value="submit">
</form>

【讨论】：

【解决方案4】：

要解决这个问题，你应该这样修改你的代码：

<script>
$("#addProducts").submit(function(event) {
  var str = $("#addProducts").serialize();
  $.ajax({
    type: "POST",
    url: "subAddProduct.php",
    data:str,
    success: function(data){
      //perform your success process here
      return false;
    }
  })
});
</script>

【讨论】：

【解决方案5】：

尝试将 Ajax 异步属性设置为 false，如下所示

<script>
  $("#addProducts").submit(function(event) {
     var str = $("addProducts").serialize();
     event.preventDefault();
     $.ajax({
        async:false
        type: "POST",
        url: "subAddProduct.php",
        data:str
     })
  });
</script>

【讨论】：

【解决方案6】：

如下调整你的JS

<script>
$("#addProducts").click(function(event) {
    $.ajax({
        type: "POST",
        url: "subAddProduct.php",
        dataType : 'json', //data type can be any type like json, html etc.
        data:'str='+str
        success : function(data) {
            //perform your success process here
        }
    });
});
</script>

我没有测试上面的代码，但它应该可以工作，因为我对我的 ajax 功能使用相同的代码。

还可以查看 jquery 文档以获取 $.ajax http://api.jquery.com/jQuery.ajax/

【讨论】：

【解决方案7】：

$("#addProducts").click(function(event) {
    var str = $("#addProducts").serialize();
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "subAddProduct.php",
        data:str
    });
});

【讨论】：

如果您使用 ajax 序列化进行文件上传，这将无法正常工作。而且您在此处的 $("#addProducts") 中有类型错误。您错过了 #
没有变化，输入值只是随着 url 的增加而页面每次重新加载
如何使用这个脚本上传文件
永远不要使用提交。使用点击事件
这里是你所说的一个例子。 phpletter.com/Our-Projects/AjaxFileUpload

【解决方案8】：

这不是 ajax 问题，实际上您正在使用 $("#addProducts").submit 发送页面提交请求并导致页面重新加载。使用点击而不是提交。

另一个错误$("addProducts").serialize()，为id选择器添加#。下面是示例代码：

$("#addProducts").click(function(event) {
    var str = $("#addProducts").serialize();
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "subAddProduct.php",
        data:str
    });
});

【讨论】：

序列化方法。

【解决方案9】：

序列化时缺少主题标签...您的代码让 jQuery 查找名为“addProducts”的元素，而不是 id 为“addProducts”的元素更改此行

var str = $("addProducts").serialize();

到这一行

var str = $("#addProducts").serialize();

【讨论】：

【解决方案10】：

<script>
    $("#addProducts").submit(function(event) {
    event.preventDefault();
    var str = $("#addProducts").serialize();
      event.preventDefault();
      $.ajax({
      type: "POST",
      url: "subAddProduct.php",
      data:str
   })
    });
    return false;
</script>

你需要preventDefault，它会阻止表单正常提交，导致页面重新加载。然后你需要返回 false ，因为 Firefox 不喜欢 preventDefault :P

【讨论】：

你知道 ajax 吗？为什么这两个 event.preventDefault();并返回假； .那些做同样事情的人
考虑到 preventDefault 不是 Ajax，你显然不知道！这称为跨浏览器测试，您可能需要做一些研究。
$("addProducts") 应该是 $("#addProducts")