Question

我改变了我的php和jQuery的编码风格，但我的注册

$("#reg_form_company").bind("submit", function() {
    $.fancybox.showActivity();
    $.ajax({
            type     : "POST",
            cache    : false,
            url      : $(this).attr('action'),
            data     : $(this).serializeArray(),
            success  : function(data) {
                $(".printArea").empty().append(data).css('visibility','visible');
            }
    });
    return false;
});

然后这是我的表格

<form id="reg_form_company" action="index.php?module=register&actionregister" method="post" >
      <input>[...]</input>
</form>

然后单击“提交”按钮后，它不起作用，我认为有人可以帮我解决这个问题，因为$ .ajax可能会混淆POST（输入）和GET（参数） “行动”形式）

感谢您的帮助，如果需要，您还可以修改整个jQuery代码。

很抱歉，不包括#reg_form_company和fancybox

Answer 1

你需要做这样的事情： http://jsfiddle.net/xSJTs/2/

$('form').on('submit',function(e){
    e.preventDefault();
    $.ajax({
        type     : "POST",
        cache    : false,
        url      : $(this).attr('action'),
        data     : $(this).serialize(),
        success  : function(data) {
            $(".printArea").empty().append(data).css('visibility','visible');
        }
    });

});

您必须使用serialize()代替serializeArray()。 serializeArray()创建一个JavaScript对象，serialize()创建一个查询字符串。

序列化：http://api.jquery.com/serialize/

SerializeArray：http://api.jquery.com/serializeArray/

基本上你要等到提交表单然后中断它（e.preventDefault();）。

Answer 2

您必须截取表单的点击/提交事件，并参阅表格，如下所示：

 $("#myForm").submit(function(){
    var $form = $(this);

    $.ajax({
     type     : "POST",
     cache    : false,
     url      : $form.attr('action'),
     data     : $form.serializeArray(),
     success  : function(data) {
         $(".printArea").empty().append(data).css('visibility','visible');
     }
    });
 })

并在表单中添加ID，如：

<form id="myForm" action="index.php?module=register&actionregister" method="post" >
      <input>[...]</input>
</form>

Answer 3

您必须引用您的表单而不是$(this)

给你的表格一个id或类ex：

<form action="index.php?module=register&actionregister" method="post" id="MyForm">
      <input>[...]</input>
</form>

并在JQuery中：

$.ajax({
        type     : "POST",
        cache    : false,
        url      : $('#MyForm').attr('action'),
        data     : $('#MyForm').serializeArray(),
        success  : function(data) {
            $(".printArea").empty().append(data).css('visibility','visible');
        }
});

Answer 4

    //This is still showing the cgi output of my script in the browser
 $('#myForm').submit(function()){
                 $('#myForm').preventDefault();
        $.ajax({
            type     : "POST",
            cache    : false,
            url      : $('#myForm').attr('action'),
            data     : $('#myForm').serialize(),
            success  : function(data) {
                $(".printArea").empty().append(data).css('visibility','visible');
            };

    <form id = "myForm" action="cgi-bin/matt/matt-test.cgi?module=register&actionregister" method ="post">

Answer 5

适用于文件输入的Ajax

您好，
其他答案对我来说没有用，因为我需要传递文件输入，而且不能“序列化”。

好方法是通过FormData传递并禁用processData：

$('form').on('submit',function(e){
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        type     : "POST",
        cache    : false,
        url      : $(this).attr('action'),
        data     : formData,
        success  : function(data) {
            //$(".printArea").empty().append(data).css('visibility','visible');
        },
        contentType: false,
        processData: false
    });

});

希望它有所帮助;）

如何在表单的动作中使用jQuery .ajax

5 个答案:

适用于文件输入的Ajax