如何在锚标签上调用 AJAX 函数？答案

【问题标题】：How to call an AJAX function on anchor tag?如何在锚标签上调用 AJAX 函数？
【发布时间】：2013-09-17 17:43:47
【问题描述】：

我的网站使用 PHP、jQuery、AJAX、Smarty。我有以下来自 smarty 模板的代码行。我想在该超链接的 onclick 上调用 jQuery AJAX 函数，但我无法调用它。你能帮我调用 jQuery AJAX 函数吗？以下是我的代码。 Smarty 模板中的代码：

<a class="edit_user_transaction_status" href="{$control_url}{$query_path}?op=edit_user_transaction&page={$page}&txn_no={$user_transaction_details.transaction_no}&transaction_data_assign={$user_transaction_details.transaction_data_assign}&user_id={$user_id}{if $user_name!=''}&user_name={$user_name}{/if}{if $user_email_id!=''}&user_email_id={$user_email_id}{/if}{if $user_group!=''}&user_group={$user_group}&{/if}{if $user_sub_group!=''}&user_sub_group={$user_sub_group}{/if}{if $from_date!=''}&from_date={$from_date}{/if}{if $to_date!=''}&to_date={$to_date}{/if}{if $transaction_status!=''}&transaction_status={$transaction_status}{/if}{if $transaction_no!=''}&transaction_no={$transaction_no}{/if}">Update</a>

jQuery AJAX 函数如下：

$(".edit_user_transaction_status").click(function(e) { 
         e.preventDefault();
         //for confirmation that status change
         var ans=confirm("Are you sure to change status?");
         if(!ans) {
             return false;
         }  
         var post_url           = $(this).attr('href');
         var transaction_status_update = $('#transaction_status_update').val();      

         $.ajax({
             type: "POST",
             url: post_url+"&transaction_status_update="+transaction_status_update,
                 data:$('#transaction_form').serialize(),
             dataType: 'json',  
             success: function(data) {              
                 var error = data.login_error;

                 $(".ui-widget-content").dialog("close");
                //This variables use for display title and success massage of transaction update              
                 var dialog_title   = data.title;              
                 var dialog_message = data.success_massage; 
                 //This get link where want to rerdirect
                 var redirect_link  = data.href;            

                 var $dialog = $("<div class='ui-state-success'></div>")
                 .html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
                 .dialog({
                     autoOpen: false,
                     modal:true,
                     title: dialog_title,
                     width: 500,
                     height: 80,
                     close: function(){                                     
                         document.location.href =redirect_link;
                     }                  
                 });                    

                 $dialog.dialog('open');                    
             }          
        });
     });
});

如果我尝试在函数开始时打印警报，它不会被打印。你能帮我实现这个目标吗？提前致谢。

【问题讨论】：

将所有代码包装在函数中并调用
确保你的脚本里面有.. document.ready 函数$(function(){..})
一个A标签就相当于一个完整的程序...
它是否包含在 $( document).ready() {} 中？ link
您的代码末尾有一组额外的});，这不是必需的。

标签： javascript php jquery html ajax

【解决方案1】：

更正的代码：

$(".edit_user_transaction_status").click(function(e) { 
         e.preventDefault();
         //for confirmation that status change
         var ans=confirm("Are you sure to change status?");
         if(!ans) {
             return false;
         }  
         var post_url           = $(this).attr('href');
         var transaction_status_update = $('#transaction_status_update').val();      

         $.ajax({
             type: "POST",
             url: post_url+"&transaction_status_update="+transaction_status_update,
                 data:$('#transaction_form').serialize(),
             dataType: 'json',  
             success: function(data) {              
                 var error = data.login_error;

                 $(".ui-widget-content").dialog("close");
                //This variables use for display title and success massage of transaction update              
                 var dialog_title   = data.title;              
                 var dialog_message = data.success_massage; 
                 //This get link where want to rerdirect
                 var redirect_link  = data.href;            

                 var $dialog = $("<div class='ui-state-success'></div>")
                 .html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
                 .dialog({
                     autoOpen: false,
                     modal:true,
                     title: dialog_title,
                     width: 500,
                     height: 80,
                     close: function(){                                     
                         document.location.href =redirect_link;
                     }                  
                 });                    

                 $dialog.dialog('open');                    
             }          
        });
     });

注意：从最后一行删除});。

【讨论】：