使用用户输入更新URL参数

时间:2015-09-29 14:14:50

标签: javascript jquery

我有一个URL作为函数参数传递,如:

requestCrossDomain('https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&email=skip@larc.nasa.gov&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16', function(results){

$('#loadedContent').css("display","").html(results);});

function requestCrossDomain( site, callback ) {


    if ( !site ) {
    alert('No site was passed.');
    return false;
    }


var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=?';


    $.getJSON( yql, cbFunc );

    function cbFunc(data) {

    if ( data.results[0] ) {

    data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');


    if ( typeof callback === 'function') {
        callback(data);
    }
    }

    else throw new Error('Nothing returned from getJSON.');
    }
}

我需要将与lat=23lon=16对应的网址中的参数更改为用户输入。

我尝试使用string.replace,但我是JavaScript新手。我不能让它工作,我该怎么做?

4 个答案:

答案 0 :(得分:2)

尝试使用像http://jsfiddle.net/mig1098/zzaerydw/这样的简单正则表达式:

var url= 'https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&email=skip@larc.nasa.gov&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16';
var lat = 2222;//test
var lon = 1111;//test
//[0-9.] -> for integer or decimal
var result = url.replace(/lat=[0-9.]*/,'lat='+lat).replace(/lon=[0-9.]*/,'lon='+lon);

答案 1 :(得分:2)

使用__placeholder__文字创建模板网址,根据需要进行替换。

E.g。

function requestCrossDomain(params) {
    var template = "https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?lat=__lat__&lon=__lon__&num=197110&submit=Submit&hgt=100&veg=17&sitelev=&email=skip@larc.nasa.gov&p=grid_id&p=T10M&p=DLYRANGE&step=2";

    for (var k in params)
        template = template.replace("__" + k + "__", encodeURIComponent(params[k]));

    console.log(template)
}

requestCrossDomain( {lat: 123, lon: 456} );

答案 2 :(得分:1)

没有更多信息,听起来你正在尝试进行基本的子串操作,只需稍作修改就可以了:

let url = 'https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&email=skip@larc.nasa.gov&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16'

// assuming you have two input elements 'lat' and 'lon'
let lat = document.getElementById("lat").value;
let lon = document.getElementById("lon").value;

url = url.replace(/\&lat=[0-9.]*/, '&lat='+lat); 
url = url.replace(/\&lon=[0-9.]*/, '&lon='+lat);

答案 3 :(得分:1)

您可以使用正则表达式。以下是您的评论的完整示例:

$(function(){
	  function requestCrossDomain(site, callback) {
		  if (!site) {
			  alert('No site was passed.');
			  return false;
		  }
		  var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=?';
		  $.getJSON(yql, cbFunc);
		  function cbFunc(data) {
			  if (data.results[0]) {
				  data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
					  window[callback](data);
			  } else throw new Error('Nothing returned from getJSON.');
		  }
	  }
	  $('#test').click(function(){
		  var url = 'https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&email=skip@larc.nasa.gov&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16';
		  var newLat='lat='+ encodeURIComponent($('#lat').val());
		  var newLon='lon='+ encodeURIComponent($('#lon').val());
		  url = url.replace(/lat=[\d.]+/,newLat).replace(/lon=[\d.]+/,newLon);
		  requestCrossDomain(url, 'someFunction');
	  });
});

function someFunction(results){
    console.log(results);
    $('#loadedContent').css("display","").html(results);   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="lat" value="45"><br>
<input type="text" id="lon" value="31"><br>
<button id="test">Make URL</button>    
<br><br>
<div id="loadedContent"></div>