Ajax不发送数据而无需重新加载

follwing ajax脚本不发送数据到php，页面只是重新加载&表单输入值传递到url。Ajax不发送数据而无需重新加载

脚本

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

来源

2013-05-20 Jaskaran S.P

检查手册在jquery中为ajax –

'.submit（）'提交表单。改为使用'.click（）'。 [文档]（http://api.jquery.com/submit/） – pvorb

试图将'event.preventDefault（）'放在你的'str'变量声明之上？ – naththedeveloper

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

来源

2013-05-20 10:28:22 underscore

if you u使用ajax序列化文件上传这将无法正常工作。并且你有在$（“＃addProducts”）在这里输入错误。我错过了＃ – underscore

没有变化，输入值只是与URL和页面每次重新加载 –

如何我可以使用这个脚本上传文件 –

<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-20 10:29:29 Karl

你甚至知道阿贾克斯？为什么既event.preventDefault（）;并返回false; 。做同样的事情 – underscore

考虑到preventDefault不是Ajax，你显然不知道！这就是所谓的跨浏览器测试，你可能想做一些研究。 – Karl

$（“addProducts”）应该是$（“＃addProducts”） – underscore

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

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

}）;

来源

2013-05-20 10:31:20

不要复制和粘贴。这是什么$（“addProducts”） – underscore

我在复制什么？ –

$（“addProducts”）应该是$（“＃addProducts”） – underscore

它不是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-20 10:33:41

序列化方法。 –

调整你的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特性。

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

来源

2013-05-20 10:40:08

jQuery的文档有已经在你的代码中的问题：$("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比拉尔和pvorb说，恐怕这是假的。 submit()是正确的功能使用（见jQuery documentation）。

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

来源

2013-05-20 10:56:10 PLPeeters

<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-20 11:18:41 Amir

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

<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-22 09:11:48 QArea

尝试将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-22 11:20:46 Ninad

失踪时序列化...你的代码是有jQuery的查找调用的“addProducts”的ID“addProducts”不是一个元素的元素包括hashtag改变这一行

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

这一行

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

来源

2013-07-15 21:41:07 Banning

Ajax不发送数据而无需重新加载

回答

相关问题