0

例如，我有一个 HTML 表单：

<form role="search" method="get" id="searchform" action="" >

    <!-- DIRECT SEARCH INPUT TO SEARCH STRING -->
    <input type="text" value="" name="s" id="s" /> 
    <input type="submit" id="searchsubmit" value="Search" />

    <!-- DROPDOWN TO SELECT ONE CHOICE -->
    <select name='country' id='country' class='postform' >
        <option class="level-0" value="2">USA</option>
        <option class="level-0" value="3">Canada</option>
        <option class="level-0" value="4">Mexico</option>
        <option class="level-0" value="5">Cuba</option>
    </select>

    <!-- CHECKBOXES TO SELECT MULTIPLE CHOICES -->
    <div id="color">
        <input type="checkbox" name="" value="21" />Beachfront
        <input type="checkbox" name="" value="16" />TV
        <input type="checkbox" name="" value="20" />Internet
        <input type="checkbox" name="" value="17" />Pets Allowed
    </div> 

</form>

<div id="results"><!-- THE AJAX RESULTS GOES HERE --></div>

我希望每次用户都能发出 AJAX 请求：

1）在搜索输入框中写一些东西，然后点击搜索按钮

或者

2) 从下拉菜单中选择一项

或者

3）从选中的复选框中选择一个或多个选项

问题是我不知道如何正确地构建我的 JavaScript 代码，以及记住和管理用户之前选择的选项的最佳方式是什么，以考虑所有因素。例如，不仅是当他写东西并单击搜索按钮时的搜索词，而且还要计算下拉选项（可能在前一步完成），如果他之前检查过某些东西，可能还会从复选框中选中的选项。这是我到目前为止所拥有的：

jQuery(document).ready(function($){

    // RESULTS SHOULD APPEAR IN #results DIV AFTER AJAX IS DONE
    var $maincontent = $('#results'); 



    // SEARCH INPUT PROCESSING
    $('#searchsubmit').click(function(e){ 
        e.preventDefault();

        var searchval = $('#s').val();

        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'ajax_search_action_do',
                searchval : searchval
            },
            function( response ) {
                $maincontent.empty();
                $maincontent.append( response );
            }
        );
    });

    // COUNTRY DROPDOWN CHOICE PROCESSING
    $('#country').on('change', function() { 

            var countryval = this.value;

            $maincontent.animate({ opacity : '0.1' })

            $.post(
                WPaAjax.ajaxurl,
                {
                    action : 'ajax_search_action_do',
                    countryval : countryval
                },
                function( response ) {
                    $maincontent.empty();
                    $maincontent.append( response );
                    $maincontent.animate({ opacity : '1' })
                }
            );

            return false;
    });


    // CHECKBOXES PROCESSING
    $('#color input[type=checkbox]').click(function() {    
        if (this.checked) {
            // code if checked
        }
        else {
            // nothing
        }        

    });

});

如您所见，情况非常糟糕。因为一个“函数”只检查单击，一个更改，我不知道如何从复选框中获取值并创建一个数组并通过 ajax 发送它;(。

知道如何构造 JavaScript 代码，使其不那么分离，并且检查以某种方式在一个部分（或更合乎逻辑）而不是三个分开的部分？

欢迎任何想法。

4

2 回答 2

1

创建 som 逻辑：

var _do = {
    bind: function() {
        var self = this;
        $('#searchsubmit').on('click', function(e){ 
            e.preventDefault();
            self.ajax('searchval', $('#s').val());
        });

        $('#country').on('change', function() { 
            self.ajax('countryval', this.value);
        });
        return self;
    },
    ajax: function(key, value) {
        var data = {action: 'ajax_search_action_do'};
        data[key] = value;
        $.post(
            WPaAjax.ajaxurl, data, function( response ) {
                $maincontent.empty().append( response );
            }
        );
    }
}

jQuery(document).ready(function($){
    _do.bind();
});
于 2013-07-17T07:57:19.737 回答
0

也许使用 jquery.form.js？ http://malsup.com/jquery/form/

这是一个很棒的插件，只需像普通重定向表单一样构建表单，在复选框名称中添加数组

<input type="checkbox" name="types[]" value="21" />Beachfront

将目标 URL 添加到表单中，然后...

当你想提交表格时

$('searchform').ajaxSubmit({

  success: function() {

    // callback

  }

)

在复选框更改、下拉列表更改等时触发此事件。要使代码干净，请使用一个选择器

$('#country, #s, #color input').on('change', sendAjaxForm);
于 2013-07-17T07:51:18.623 回答