1

下面的 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>
4

10 回答 10

2

您的代码中已经存在问题：$("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 文档）。

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

于 2013-05-20T10:56:10.473 回答
1

调整你的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/

于 2013-05-20T10:40:08.917 回答
1

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

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

到这条线

var str = $("#addProducts").serialize();
于 2013-07-15T21:41:07.937 回答
1

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

<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>
于 2013-05-22T09:11:48.980 回答
1 
$("#addProducts").click(function(event) {
    var str = $("#addProducts").serialize();
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "subAddProduct.php",
        data:str
    });
});
于 2013-05-20T10:28:22.303 回答
1

当文档未准备好时，您可能正在尝试绑定您的函数。

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

});

于 2013-05-20T10:31:20.030 回答
1

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

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

$("#addProducts").click(function(event) {
    var str = $("#addProducts").serialize();
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "subAddProduct.php",
        data:str
    });
});
于 2013-05-20T10:33:41.807 回答
1 
<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>
于 2013-05-20T11:18:41.343 回答
1

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

<script>
  $("#addProducts").submit(function(event) {
     var str = $("addProducts").serialize();
     event.preventDefault();
     $.ajax({
        async:false
        type: "POST",
        url: "subAddProduct.php",
        data:str
     })
  });
</script>
于 2013-05-22T11:20:46.907 回答
0 
<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

于 2013-05-20T10:29:29.693 回答