通过AJAX(WordPress方式)将表单数据提交到另一个页面

时间:2017-11-14 作者:nelson

我有以下表格

<form name="interest_calculator" id="interest_calculator">
                    <input type="hidden" name="action" value="calculate_investor_interest" />
                    <div class="tab">
                        <h4><span class="badge">01</span> Investment Details</h4>
                        <div class="form-group">
                            <label for="currency_type">Select Currency</label>
                            <select name="currency_type" id="currency_type" class="form-control">
                                <option value="USD" selected>USD</option>
                                <option value="KSHS">KSHS</option>
                            </select>
                            <small>For USD transactions,our dollar exchange is @ <strong>1 USD = <?php echo get_option(\'qfe_buying_rate\');?> KES today(buying)</strong> and @ <strong>1 USD= <?php echo get_option(\'qfe_selling_rate\');?> KES today(selling)</strong></small>
                        </div>
                        <div id="principal_amount_group" class="form-group">
                            <label for="principal_amount">Amount to  Invest</label>
                            <small id="amount_error" class="error"></small>
                            <input type="text" required name="principal_amount" id="the_principal_amt" class="form-control"/>
                            <small id="amount_info">minimum amount is: <strong><?php echo get_option(\'qfe_minimum_usd\');?> USD</strong></small>

                        </div>
                        <div class="form-group">
                            <label for="trade_months">Number of months to trade</label>
                            <select name="trade_months" id="trade_months" class="form-control" required>
                                <option value="3">3 Months</option>
                                <option value="6">6 Months</option>
                                <option value="9">9 Months</option>
                                <option value="12">12 Months</option>
                            </select>
                        </div>
                        <button id="btnDoCalculation" type="submit" class="btn btn-success pull-left" name="btnDoCalculation">Visualize Interest</button>
                    </div>

                    <div class="clearfix"></div>

                    <div class="tab">
                        <h4><span class="badge">02</span>Payment Details</h4>
                        <div class="form-group">
                            <h3>Charge Details</h3>
                            <p>Charge details are as follows:</p>
                            <div class="row">
                                <div class="col-xs-12 col-sm-6">
                                    <table id="deposit_results" class="table table-condensed">
                                        <thead>
                                            <tr>
                                                <th>Item</th>
                                                <th class="text-right">Cost</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Amount to Deposit</td>
                                                <td id="deposit_value" class="text-right"></td>
                                            </tr>
                                            <tr>
                                                <td>Transfer Charge</td>
                                                <td id="management_charge_value" class="text-right"></td>
                                            </tr>
                                            <tr>
                                                <td>Total to Deposit</td>
                                                <td id="total_deposit_value" class="text-right"><strong></strong></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <h3>Banking Details</h3>
                            <p><strong>Bank:</strong> N/A</p>
                            <p><strong>Acc. No:</strong> N/A</p>
                            <p><strong>Acc. Name</strong>N/A</p>
                        </div>

                        <div class="form-group">
                            <label for="the_schedule">Interest payment terms(Cannot be be altered)</label>
                            <select name="the_schedule" id="the_schedule" class="form-control" required>
                                <option value="monthly">Monthly</option>
                                <option value="maturity" selected>On Maturity</option>
                            </select>
                            <small>Money will be wired to your stated bank account. Other methods coming soon</small>
                        </div>
                    </div>

                    <button id="nextBtn" class="btn btn-primary pull-right">Next</button>
                    <button id="prevBtn" class="btn pull-right">Previous</button>

                    <!-- Circles which indicates the steps of the form: -->
                    <div style="text-align:center;margin-top:40px;">
                      <span class="step"></span>
                      <span class="step"></span>
                    </div>

                </form>
BtnoCalculation的ajax提交代码如下:

$(\'#btnDoCalculation\').click(function(e){
                var formData = $(\'#interest_calculator\').serialize();

                $.ajax({
                    type: \'POST\',
                    url:\'<?php echo admin_url(\'admin-ajax.php\');?>\',
                    data:formData,
                    action:\'calculate_investor_interest\',
                    dataType: \'json\',
                    encode:true
                }).done(function(data){
                    if(data.success){   
                        console.log(data.message);
                        var results = data.calc_results;

                        var newData = results.reduce(function(collection, element){
                        var rowData = {}; //create a new empty row

                          element.reduce(function(collection, element){
                            //put the elements into the row
                            rowData[element[0]] = element[1];
                            return rowData;
                          }, rowData);

                          collection.push(rowData); //add the row to the results
                          return collection;
                        }, []);                         

                        var tr;
                        //overwrite data
                        $(\'#compound_interest_table tbody\').empty();


                        for (var i=0; i<newData.length; i++){
                            tr = $(\'<tr/>\');

                            //put datejs library here.....

                            tr.append(\'<td>\' + newData[i].maturity_date + \'</td>\' );
                            tr.append(\'<td>\' + newData[i].interest_rate + \'</td>\' );
                            tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].interest_earned + \'</td>\' );
                            tr.append(\'<td>\' + newData[i].management_fee + \'</td>\' );
                            tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].gross_earning + \'</td>\' );
                            tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].investor_net_commission + \'</td>\' );
                            tr.append(\'<td>\' + newData[i].investor_net_earning + \'</td>\' );


                            $(\'#compound_interest_table tbody\').append(tr);

                        }

                    }else{
                        console.log(\'There is a problem \');
                    }

                }).fail(function(data){
                    console.log(data);
                });

                e.preventDefault();
            });
ajax动作挂钩:

//handle form submissions
function handle_investment_calc(){
    include_once(\'includes/controllers/investment_calculator.php\');
}
add_action(\'wp_ajax_calculate_investor_interest\', \'handle_investment_calc\');
当使用纯PHP、HTML和CSS时,它可以完美地工作。发送表单中的数据,进行计算(通过investment\\u calculator.php脚本),并将结果毫无疑问地输出到compound\\u interest\\u表。然而,当我将代码传输到wordpress插件(如上所示)并尝试以wordpress的方式执行ajax时,我没有得到任何结果输出。

我哪里做错了?所需的效果是,当我单击Do calculation按钮时,它会如上所述将输出返回到表中。investment\\u calculator脚本正常。

更新时间:

在将“action”参数添加到ajax代码中之后,现在似乎正在将数据发送到投资计算器,结果正常(在控制台中)。但是,结果不会输出到表中。

控制台响应Console response for Ajax Call

更新2:

这样修改了ajax调用。

$.ajax({
                    type: \'POST\',
                    url:\'<?php echo admin_url(\'admin-ajax.php\');?>\',
                    data:formData,
                    action:\'calculate_investor_interest\',
                    dataType: \'json\',
                    encode:true,
                    complete:function(r){
                        console.log(r.responseText);

                        var results = r.responseText;

                        var newData = results.reduce(function(collection, element){
                        var rowData = {}; //create a new empty row

                          element.reduce(function(collection, element){
                            //put the elements into the row
                            rowData[element[0]] = element[1];
                            return rowData;
                          }, rowData);

                          collection.push(rowData); //add the row to the results
                          return collection;
                        }, []);                         

                        var tr;
                        //overwrite data
                        $(\'#compound_interest_table tbody\').empty();


                        for (var i=0; i<newData.length; i++){
                            tr = $(\'<tr/>\');

                            //put datejs library here.....

                            tr.append(\'<td>\' + newData[i].maturity_date + \'</td>\' );
                            tr.append(\'<td>\' + newData[i].interest_rate + \'</td>\' );
                            tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].interest_earned + \'</td>\' );
                            tr.append(\'<td>\' + newData[i].management_fee + \'</td>\' );
                            tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].gross_earning + \'</td>\' );
                            tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].investor_net_commission + \'</td>\' );
                            tr.append(\'<td>\' + newData[i].investor_net_earning + \'</td>\' );


                            $(\'#compound_interest_table tbody\').append(tr);

                        }



                    }

                });
由于@Piyush Rawat,数据正在被接收,但现在mapreduce函数出现问题(“reduce not a function”)。我如何解决它

2 个回复
最合适的回答,由SO网友:nelson 整理而成

更新3:解决方案!!!除了将action参数添加到ajax函数之外,我还将结果编码到interest\\u calculator中。php使用wp\\u send\\u json(),然后将responseText转换为一个对象(使用json.Parse),这样我就可以使用Map reduce来简化数组并将数据输出到表中。令人沮丧,但我至少学到了一些东西:

谢谢@PiyushRawat。。。。。我欠他/她这个答案的比我自己还多:-)

以下是Ajax调用修改:

$(\'#btnDoCalculation\').click(function(e){
                var formData = $(\'#interest_calculator\').serialize();

                $.ajax({
                    type: \'POST\',
                    url:\'<?php echo admin_url(\'admin-ajax.php\');?>\',
                    data:formData,
                    action:\'calculate_investor_interest\',
                    dataType: \'json\',
                    encode:true,
                    complete:function(data){                    
                            var results_data = data.responseText;
                            var results = JSON.parse(results_data);

                            var newData = results.reduce(function(collection, element){
                                var rowData = {}; //create a new empty row

                                  element.reduce(function(collection, element){
                                    //put the elements into the row
                                    rowData[element[0]] = element[1];
                                    return rowData;
                                  }, rowData);

                                  collection.push(rowData); //add the row to the results
                                  return collection;
                            }, []);                         

                            var tr;
                            //overwrite data
                            $(\'#compound_interest_table tbody\').empty();


                            for (var i=0; i<newData.length; i++){
                                tr = $(\'<tr/>\');

                                //put datejs library here.....

                                tr.append(\'<td>\' + newData[i].maturity_date + \'</td>\' );
                                tr.append(\'<td>\' + newData[i].interest_rate + \'</td>\' );
                                tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].interest_earned + \'</td>\' );
                                tr.append(\'<td>\' + newData[i].management_fee + \'</td>\' );
                                tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].gross_earning + \'</td>\' );
                                tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].investor_net_commission + \'</td>\' );
                                tr.append(\'<td>\' + newData[i].investor_net_earning + \'</td>\' );


                                $(\'#compound_interest_table tbody\').append(tr);

                            }

                    }
                });
                e.preventDefault();
            });
也可以进行双重验证(使用javascript和PHP脚本进行验证,在javascript失败时充当安全网)

SO网友:Pratik bhatt

修改下面的代码,我在其中添加了操作。

$(\'#btnDoCalculation\').click(function(e){
        var formData = $(\'#interest_calculator\').serialize();

        $.ajax({
            type: \'POST\',
            url: \'<?php echo admin_url(\'admin-ajax.php\');?>\',
            data:formData,
            dataType: \'json\',
            action:calculate_investor_interest
            encode:true,                            


        }).done(function(data){
            if(data.success){   
                    console.log(data);
                    var results = data.calc_results;

                    var newData = results.reduce(function(collection, element){
                    var rowData = {}; //create a new empty row

                      element.reduce(function(collection, element){
                        //put the elements into the row
                        rowData[element[0]] = element[1];
                        return rowData;
                      }, rowData);

                      collection.push(rowData); //add the row to the results
                      return collection;
                    }, []);                         

                    var tr;
                    //overwrite data
                    $(\'#compound_interest_table tbody\').empty();


                    for (var i=0; i<newData.length; i++){
                        tr = $(\'<tr/>\');

                        //put datejs library here.....

                        tr.append(\'<td>\' + newData[i].maturity_date + \'</td>\' );
                        tr.append(\'<td>\' + newData[i].interest_rate + \'</td>\' );
                        tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].interest_earned + \'</td>\' );
                        tr.append(\'<td>\' + newData[i].management_fee + \'</td>\' );
                        tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].gross_earning + \'</td>\' );
                        tr.append(\'<td class="hidden-xs hidden-sm">\' + newData[i].investor_net_commission + \'</td>\' );
                        tr.append(\'<td>\' + newData[i].investor_net_earning + \'</td>\' );


                        $(\'#compound_interest_table tbody\').append(tr);

                    }
        });

        e.preventDefault();
    });

结束

相关推荐

使用AJAX提交表单,以根据表单中的用户输入运行SQL Select查询

我正在WordPress支持的网站上创建一个web表单,通过在提供的字段中输入日期和一些上/下限,然后提交表单,页面将查询MySQL表,选择符合这些条件的行,并将这些值分配到同一页面的表中。不幸的是,我很难理解如何让WordPress完成这个看似简单的任务。根据我到目前为止所做的研究,从WordPress中查询SQL表需要三件事:一种用PHP编写的表单,位于中。页面模板的php文件,一个实际执行SQL查询的函数,添加到主题函数中。php文件一段Javascript代码,用于将上述两件事联系在一起我为测试此