如何合并两个 Ajax 表单答案

【问题标题】：How Merge two Ajax form如何合并两个 Ajax 表单
【发布时间】：2016-12-26 07:50:42
【问题描述】：

我有两个 Ajax 表单来过滤我的 wordpress 网站同一页面上的帖子。这两个是分别过滤帖子的好方法。

这里是链接Test Server

现在我正在尝试将这两个合并为一个。之后它的显示结果为One form。

如何将 2 个 Ajax 表单合并为 1 个？

脚本形式：1

jQuery(document).ready(function($){
 $('#test .br').click(function(){

// declaring an array
var choices = {};

$('.contents').remove();
$('.filter-output').empty()

console.log(choices);
$.ajax({
    url: ajaxobject.ajaxurl,
    type :'POST',
    data : {
        'action' : 'call_post',
        'choices' : choices,
    },

    success: function (result) {
        $('.filter-output').append(result);

    }     
  });
  })
 });

脚本形式：2

jQuery(function($){
$('#filter').submit(function(){
    var filter = $(this);
    $.ajax({
        url:filter.attr('action'),
        data:filter.serialize(), // form data
        type:filter.attr('method'), // POST
        beforeSend:function(xhr){
            filter.find('button').text('Processing...'); // changing the button label
        },
        success:function(data){
            filter.find('button').text('Apply filter'); // changing the button label back
            $('#response').html(data); // insert data
        }
    });
    return false;
});
});

【问题讨论】：

你可以使用单一的javascript和ajax调用函数
所以点击 br 类你想运行第一个 ajax 调用，然后提交表单并运行第二个 ajax 调用？
是的，结果将是两者的结合。表示将显示的帖子具有两个过滤器值..

标签： jquery ajax wordpress forms

【解决方案1】：

你想要这样吗？

            jQuery(document).ready(function($){
                 $('#test .br,#filter').click(function(){
                var ChkClick  = $(this).attr("id");

                if(ChkClick=='filter'){
                        $('#filter').submit(function(){
                        var filter = $(this);
                        $.ajax({
                            url:filter.attr('action'),
                            data:filter.serialize(), // form data
                            type:filter.attr('method'), // POST
                            beforeSend:function(xhr){
                                filter.find('button').text('Processing...'); // changing the button label
                            },
                            success:function(data){
                                filter.find('button').text('Apply filter'); // changing the button label back
                                $('#response').html(data); // insert data
                            }
                        });
                        return false;


                }else{
                // declaring an array
                    var choices = {};
                    $('.contents').remove();
                    $('.filter-output').empty()

                    $.ajax({
                        url: ajaxobject.ajaxurl,
                        type :'POST',
                        data : {
                            'action' : 'call_post',
                            'choices' : choices,
                        },
                        success: function (result) {
                            $('.filter-output').append(result);

                        }     
                      });
                  }  
                })
             });

【讨论】：