php - jQuery ajax 在带有链接的表单提交上失败

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>

“提交”根本不起作用。

我怎么解决这个问题？被这部分卡住了好几天！:(

编辑 - 表单的 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>

Answer 1

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

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

第一个示例可以在没有的情况下工作document.ready（但没有多大意义，因为无论如何您都在使用 jQuery）。第二个不会。

Answer 2

为了按预期执行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;
}

Answer 3

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，它也会触发，但除了函数已运行之外，它不会告诉您任何其他信息

Answer 4

我有一个解决方案。不是最漂亮的，因为我想要一个纯 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" />

现在它适用于成功回调触发。

感谢您对此的所有帮助。