jQuery ajax在表单提交链接时失败

时间:2012-06-20 18:08:48

标签: php forms jquery

在此question的序列中,我在表单中获得的内容现在正在更新数据库。但是,当我点击此链接时

<a onclick="doUpdate()" href="#" id="commit-changes" class="uibutton submit_form">Gravar</a>

jQuery .ajax函数触发错误回调并使用该信息更新数据库。

这是代码

function doUpdate()
{
              e.preventDefault();
              $.ajax({
                type: "POST",
                data: $("#validation").serialize(),
                cache: false,
                url:"modules/user/updateuser.php",
                success : function(data){
                    $("#response-update").html(data);
                },
                error:  function(data){
                    $("#response-update").html("Erro na submissão");
                }                
           });
          }

我想获得成功回调,以便在用户保存数据时向用户显示一条好消息。

但是,如果我只是这样做

 <a href="#" id="commit-changes" class="uibutton submit_form">Gravar</a>
 <script>
 $(function(){
 $('#commit-changes').click(function(e){
              e.preventDefault();
              $.ajax({
                type: "POST",
                data: $("#validation").serialize(),
                cache: false,
                url:"modules/user/updateuser.php",
                success : function(data){
                    $("#response-update").html(data);
                },
                error:  function(data){
                    $("#response-update").html("Erro na submissão");
                }                
           });
          });
 });
 </script>

“submition”根本不起作用。

我该如何解决这个问题?被困在这个部分好几天了! :(

编辑 - 表单的HTML(这也是在页面的乞讨中加载的响应)

  $response.='<form id="validation" method="post"> 
                                <fieldset >
                                <input type="hidden" name="user_id" value="'.$_POST['user_id'].'"/>
                                <legend>Actualizar Dados Utilizador</legend>
                                      <div class="section ">
                                      <label>Nome<small>Insira o seu nome</small></label>   
                                      <div> 
                                      <input type="text" class="validate[required,custom[onlyLetterSp]] large" name="nome" id="f_required" value="'.utf8_encode($rcs_user->nome).'">
                                      </div>                                      
                                      </div>';
 $response.='<div class="section ">
                                      <label> Email<small>Insira o seu email</small></label>   
                                      <div> 
                                      <input type="text" class="validate[required,custom[email]] large" name="email" id="e_required" value="'.  utf8_encode($rcs_user->email).'">
                                      </div>
                                      </div>';

 $response.= '<div class="section">
                                        <label>Permissões<small>Seleccione o tipo de utilizador </small></label>   
                                        <div>
                                            <select class="medium" name="role">

                                                       '.$role.'                                                 

                                            </select>       
                                      </div>
                                      </div>                                      
                                     <div class="section">
                                            <label>Activo<small>Activar utilizador</small></label>


                                         <div>
                                            '.$activo.'
                                            <span class="f_help">ON / OFF  </span> 
                                        </div>
                                  </div>

                                  <div class="section last">
                                  <div>
                                     <a onclick="return doUpdate()" href="#" id="commit-changes" class="uibutton submit_form">Gravar</a><a class="uibutton special"   onClick="ResetForm()" title="Limpar Formulário"   >Limpar Formulário</a>
                                 </div>
                                 </div>

                                </fieldset></form>

4 个答案:

答案 0 :(得分:0)

您是否将jQuery代码放在document.ready处理程序中?

jQuery(function ($) {
    // put jQuery here
});

第一个示例将在没有document.ready的情况下工作(但没有多大意义,因为无论如何你都在使用jQuery)。第二个不会。

答案 1 :(得分:0)

为了按预期运行 doUpdate()功能,请尝试此操作

将锚标记 onclick 属性修改为

<a onclick="return doUpdate()" href="#" id="commit-changes" class="uibutton submit_form">Gravar</a>

并将doUpdate函数更改为

function doUpdate()
{
  $.ajax({
     type: "POST",
     data: $("#validation").serialize(),
     cache: false,
     url:"modules/user/updateuser.php",
     success : function(data){
         $("#response-update").html(data);
     },
     error:  function(data){
         $("#response-update").html("Erro na submissão");
     }                
  });

  return false;
}

答案 2 :(得分:0)

jquery ajax成功/错误回调将根据是否收到POST请求触发,它与您发布到的文件中实际发生的内容无关。奇怪的是你会得到错误回调并更新数据库,但你可以尝试让你发布的php文件给出响应,然后根据该响应运行成功/错误。

在你的php文件中你可以有这样的东西:

$testQuery = "QUERY STRING HERE";
if(!mysql_query($testQuery))
{
    echo "error";
    exit;
}
else
{
    echo "sucess";
    exit;
}

然后在你的doUpdate函数中你可以根据html运行成功回调和输出

    function doUpdate()
{
              e.preventDefault();
              $.ajax({
                type: "POST",
                data: $("#validation").serialize(),
                cache: false,
                url:"modules/user/updateuser.php",
                success : function(data){
                   if(data == "success")
                   {
                       $("#response-update").html(data);
                   }
                   else
                   {
                       $("#response-update").html("Erro na submissão");
                   }                    
                }            
           });
          }

你也可以使用“完整”回调,即使没有收到POST也会触发,除了功能已经运行之外不会告诉你任何事情

答案 3 :(得分:0)

我有一个解决方案。不是最漂亮的,因为我想要一个纯粹的jQuery解决方案,但它运行良好。

只需要更改

<a onclick="doUpdate()" href="#" id="commit-changes" class="uibutton submit_form">Gravar</a>

<input onclick="doUpdate()" href="#" id="commit-changes" class="uibutton submit_form" value="Gravar" />

现在它适用于成功回调攻击。

感谢您提供的所有帮助。