Question

以下ajax脚本没有向php发送数据，该页面只是重新加载＆amp;表单输入值传递到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>

Answer 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）。

描述：将事件处理程序绑定到“submit”JavaScript事件，或在元素上触发该事件。

Answer 2

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

Answer 3

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

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

}）;

Answer 4

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

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

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

Answer 5

按以下方式调整您的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功能。

同时检查$ .ajax http://api.jquery.com/jQuery.ajax/

的jquery文档

Answer 6

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

Answer 7

要解决此问题，您应该以这种方式修改代码：

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

Answer 8

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

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

Answer 9

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

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

到这一行

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

Answer 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没有重新加载就不发送数据

10 个答案: