我有以下表格
<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代码中之后,现在似乎正在将数据发送到投资计算器,结果正常(在控制台中)。但是,结果不会输出到表中。
控制台响应
更新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”)。我如何解决它