使用jquery从url获取url变量

我有一个只显示价格的html表单，但不向服务器提交任何内容。 这现在工作正常。

如何仅从url变量添加运行此表单的function，因此如果您使用url变量来到此页面，则不必单击“提交”按钮？

这样的事情：www.my-domain.com/formurl/?smoker=yes&amount=500000&age=20应该在页面加载完成后显示价格，并根据url变量更改表单值。

这是我的HTML：

 Do you smoke? NoYes Amount 500 0001 000 0001 500 0002 000 000 Age  Show price 
 
 

---

 $(document).ready(function () { //JSON object var obj = {"data": [ {"age": "18","500000": "645","1000000": "1018","1500000": "1391","2000000": "1764","smoker": "No"}, {"age": "19","500000": "645","1000000": "1018","1500000": "1391","2000000": "1764","smoker": "No"}, {"age": "20","500000": "645","1000000": "1018","1500000": "1391","2000000": "1764","smoker": "No"}, {"age": "18","500000": "964","1000000": "1544","1500000": "2125","2000000": "2705","smoker": "Yes"}, {"age": "19","500000": "964","1000000": "1544","1500000": "2125","2000000": "2705","smoker": "Yes"}, {"age": "20","500000": "964","1000000": "1544","1500000": "2125","2000000": "2705","smoker": "Yes"} ] }; //Find the value when form is submitted $('#calc').click(function(e) { e.preventDefault(); var data = jQuery.grep(obj.data, function(element, index){ return element.age && element.smoker; // retain appropriate elements }); var selectedSmoke = $('#smoker').val().toString().toLowerCase(); var selectedAmount= $('#amount').val().toString().toLowerCase(); var selectedage = $('#age').val().toString().toLowerCase(); var amount = ""; $.each(data,function(k, v){ if( data[k].age.toString().toLowerCase() == selectedage && data[k].smoker.toString().toLowerCase() == selectedSmoke && data[k][selectedAmount] != undefined){ amount = data[k][selectedAmount]; } }); //Empty the div $('#price-result').empty(); //Show the result in div var displayText = "
Price:" + amount + "
"; $("#price-result").append(amount == "" ? "Not a valid age" : displayText).removeClass("hide"); return false;//Stop page from reloading }); }); 

Answer 1

填写input表单URL

 function getURLParameter(name) { return decodeURI( (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] ); } var smoker = getURLParameter('smoker'); var amount = getURLParameter('amount'); var age = getURLParameter('age'); $('#smoker').val( smoker ); $('#amount').val( amount ); if(age != 'null'){ $('#age').val( age ); calculAmount(obj); } //Find the value when form is submitted $('form').submit(function(e) { e.preventDefault(); calculAmount(obj); }); 

要将数据发送到服务器，您可以使用get ， post或ajax jquery

替换$('#calc').click(function(e) by $('form').submit(function(e)

使用get ：

  //Empty the div $('#price-result').empty(); $.get("www.my-domain.com/formurl/", { smoke: selectedSmoke , amount: amount ,age: selectedage} ); 

要么

 $.post('www.my-domain.com/formurl/', $("form").serialize(), function(data) { console.log("data sent"); }); 

要么

 $.ajax({ type : 'POST', url : 'www.my-domain.com/formurl/', data: $("form").serialize(), success : function(data){ console.log("data sent"); }, error: function (request, status, error) { console.log(request.responseText); } }); 

Answer 2

如果你想从URL获取vars，你可以这样做

 $(document).ready(function(){ var getVars = getURLVariables(); for(var i in getVars){ if(i == "smoke"){ $('#smoke').val(getVars[i]); } } }); function getURLVariables(){ var getVars = []; var split = location.href.split('?')[1].split('&'); if(split != null){ for(var i in split){ var parts = split[i].split('=') getVars[parts[0]] = parts[1]; } } }