如何存储jQuery函数的结果并将其显示在其他页面上 [英] How to store jQuery function's result and display it on other page
本文介绍了如何存储jQuery函数的结果并将其显示在其他页面上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我坚持这个..我在一个页面上jquery，它根据用户放置的值运行并在同一页面上显示结果。它的工作正常，但我不想在那上面显示，但在下一页。
怎么做？
我听说通过ajax调用我可以给结果PHP，可以存储在那里，但我不知道该怎么做或如果有简单的方法呢？
I've stuck into this.. I've jquery on a page which runs according to value user put and display result on same page. its working fine but i dont want to display that on that but on next page.
How to do that?
I've heard that through ajax call i can give the result to php and can store there but i dont know how to do that or if there is easy way then that?
<form method="post">
<div class="form-group row">
<label for="age" class="col-sm-7">• What is the age of the oldest person applying? </label>
<div class="col-sm-10">
<select type="age" class="form-control form-control-sm" id="age" name="age">
<option value="" selected="" disabled="">Please Select</option>
<option value="Under 35">Under 35</option>
<option value=">35 - 44">35 - 44</option>
<option value=">45 - 54">45 - 54</option>
<option value=">55 - 59">55 - 59</option>
<option value=">60 - 64">60 - 64</option>
<option value=">65 - 69">65 - 69</option>
<option value=">70 - 74">70 - 74</option>
<option value=">75 - 79">75 - 79</option>
<option value="80 +">80 +</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="dependant" class="col-sm-7">• How many additional dependants will be covered?</label>
<div class="col-sm-10">
<select type="person" class="form-control form-control-sm" id="person" name="person">
<option value="0" selected disabled>Please Select</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</div>
</div>
<input type="button" id="next" name="next" value="Next">
</form>
<div class="alli"> $0</div>
<script type="text/javascript">
$("#next").click(function update_pricing() {
//pricing data for pricing table
var pricing_data = {
single: {
"0" : [0, 0, 0],
"Under 35": [46.75, 124.25, 152.25],
">35 - 44": [51.75, 138.25, 168.50],
">45 - 54": [59.00, 152.25, 195.50],
">55 - 59": [63.25, 160.00, 209.00],
">60 - 64": [71.00, 170.50, 220.50],
">65 - 69": [58.50, 144.25, 187.00],
">70 - 74": [71.25, 187.50, 229.00],
">75 - 79": [77.50, 225.00, 303.75],
"80 +" : [97.25, 275.75, 366.00]
},
couple: {
"0" : [0, 0, 0],
"Under 35": [88.75, 236.75, 288.50],
">35 - 44": [99.00, 262.75, 320.75],
">45 - 54": [112.00, 288.50, 371.25],
">55 - 59": [120.25, 303.75, 397.50],
">60 - 64": [134.75, 323.75, 419.25],
">65 - 69": [111.25, 275.25, 355.50],
">70 - 74": [135.25, 356.50, 435.25],
">75 - 79": [147.75, 427.75, 577.00],
"80 +" : [184.50, 523.50, 696.00]
},
family: {
"0" : [0, 0, 0],
"Under 35": [116.50, 310.50, 379.00],
">35 - 44": [129.50, 345.25, 421.00],
">45 - 54": [147.25, 379.00, 488.25],
">55 - 59": [157.50, 399.00, 522.25],
">60 - 64": [177.00, 425.25, 551.50],
">65 - 69": [146.25, 361.25, 467.25],
">70 - 74": [177.50, 468.75, 572.50],
">75 - 79": [194.00, 562.25, 759.00],
"80 +" : [242.50, 688.50, 914.75]
}
}
var age_order = {
"0" : 0,
"Under 35": 1,
">35 - 44": 2,
">45 - 54": 3,
">55 - 59": 4,
">60 - 64": 5,
">65 - 69": 6,
">70 - 74": 7,
">75 - 79": 8,
"80 +" : 9
}
var age_fields = $('select[id^="dep_age_"], #age');
var family_size = parseInt($('#person').val());
var max_age = "0";
function do_update() {
var pricing_set;
//grab appropriate pricing set from pricing data
if (family_size == 0) {
pricing_set = pricing_data.single[max_age];
} else if (family_size === 1) {
pricing_set = pricing_data.couple[max_age];
} else if (family_size > 1) {
pricing_set = pricing_data.family[max_age];
}
var price_carrier = $('.alli'); //put price values here in pricing tables
//if appropriate pricing set is grabbed (not true when either one of age or family size not selected)
if (pricing_set) {
//put price values in all pricing tables
price_carrier.each(function (i, el) {
//if family members are more than 6, increase prices by 30%
if (family_size > 6) {
$(el).text('$' + (pricing_set[i] + pricing_set[i] * 0.3).toFixed(2));
} else {
$(el).text('$' + pricing_set[i].toFixed(2));
}
});
}
};
age_fields.each(function () {
if (age_order[$(this).val()] > age_order[max_age]) {
max_age = $(this).val();
}
});
do_update();
})
</script>
推荐答案
如果你不想使用AJAX / PHP那么您可以使用HTML5中引入的浏览器的localStorage或sessionStorage，如下所示：
If you don't want to use AJAX/PHP then you can use the browser's localStorage or sessionStorage as introduced in HTML5, as:
如果您的结果存储在 id =结果的元素中
然后你可以将它存储在locaStorage中：
If your result is stored in an element with id= "results"
then you can store it in locaStorage as:
localStorage.setItem('titles', $('#results').text());
并获取任何其他页面上的项目使用：
and to fetch the item on any other page use:
var myItem = localStorage.getItem('titles');
More about local and session storage here:
Local Storage
Session Storage
这篇关于如何存储jQuery函数的结果并将其显示在其他页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
