对多个元素进行相同的AJAX调用 [英] Same AJAX call for multiple elements

问题描述

我已经阅读了一些接近的答案，但我仍然无法连接点。

I've read some answers that get close, but I'm still not able to connect the dots.

我有一堆复选框，使用Ajax将1和0写入数据库。就像现在一样，我只是复制/粘贴了ajax函数，唯一需要改变的是它监听的#id。

I have a bunch of checkboxes that write a 1 and 0 to a database using Ajax. As it is now, I have just copy/pasted the ajax function and the only thing that needs changed is the #id that it listens to.

如何概括ajax以便代码不那么重复？这是我得到的：

How can I generalize the ajax so the code isn't so repetitive? Here's what I've got:

                    <label class="rep_label"><input type="checkbox" id="goal1admin" name="goal1hit" value="1" checked />
            This is my first goal</label>

                    <label class="rep_label"><input type="checkbox" id="goal2admin" name="goal2hit" value="1"  />
            Goal 2</label>

                    <label class="rep_label"><input type="checkbox" id="goal3admin" name="goal3hit" value="1" checked />
            3rd time is the charm</label>


<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#goal1admin").change(function() { 
        if($(this).is(":checked")) { 
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"1", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal1admin').attr('checked', true); 
                },
                error:function(){
                    $('#goal1admin').attr('checked', false);                    }
            });
        } else {
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"0", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal1admin').attr('checked', false); 
                },
                error:function(){
                    $('#goal1admin').attr('checked', true); 
                }
            });
        }
    }); 
});
jQuery(document).ready(function($) {
    $("#goal2admin").change(function() { 
        if($(this).is(":checked")) { 
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"1", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal2admin').attr('checked', true); 
                },
                error:function(){
                    $('#goal2admin').attr('checked', false);                    }
            });
        } else {
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"0", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal2admin').attr('checked', false); 
                },
                error:function(){
                    $('#goal2admin').attr('checked', true); 
                }
            });
        }
    }); 
});
jQuery(document).ready(function($) {
    $("#goal3admin").change(function() { 
        if($(this).is(":checked")) { 
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"1", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal3admin').attr('checked', true); 
                },
                error:function(){
                    $('#goal3admin').attr('checked', false);                    }
            });
        } else {
            $.ajax({
                url: 'code.php',
                type: 'POST',
                data: { db_column:$(this).attr("name"), strState:"0", user:"admin" },
                success: function() { // this happens after we get results
                    $('#goal3admin').attr('checked', false); 
                },
                error:function(){
                    $('#goal3admin').attr('checked', true); 
                }
            });
        }
    }); 
});

推荐答案

$("input[type=checkbox]").change(function() {  
    var $input = $(this); 

    $.ajax({
        url: 'code.php',
        type: 'POST',
        data: { db_column:$input.attr("name"), strState:$input.is(":checked"), user:"admin" },
        success: function() { // this happens after we get results
            $input.attr('checked', true); 
        },
        error:function(){
            $input.attr('checked', false);
        }
    });
});

这会将处理程序附加到所有复选框。我把它变得通用和简单，所以你不要使用条件。

This attaches the handler to all checkboxes. I made it generic and simple so you don't to use conditionals.

这篇关于对多个元素进行相同的AJAX调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！