2015-02-20 32 views
10

Mi piace il modo in cui il metodo di jQuery $ .ajax() permette di specificare richiesta URL:jQuery accodare params alla url

{ 
    url: 'http://domain.com/?param=1', 
    data{ 
    param2: '2' 
    } 
} 

$ .ajax() il metodo sarà (probabilmente) chiamata $ .param() sulla condizione dati e facoltativamente aggiungerlo all'URL fornito.

La mia domanda è: questo tipo di manipolazione dell'url è disponibile al di fuori della chiamata $ .ajax()?

Ad esempio, voglio aprire una finestra popup e vorrei costruire l'URL nello stesso modo in cui faccio con $ .ajax().

Ho scritto una funzione che fa questo, ma ho la sensazione che sto reinventare la ruota e la duplicazione funzione già esistente di jQuery:

var prepareUrl = function(url, data) 
{ 
    var params = $.param(data); 

    if (params.length > 0) 
    { 
    // url contains a query string 
    if (url.indexOf('?') > -1) 
    { 
     // get last char of url 
     var lastChar = url.substr(url.length - 1); 

     // Append & to the end of url if required 
     if (lastChar != '&' && lastChar != '?') 
     { 
     url += '&'; 
     } 
    } 

    else // url doesn't contain a query string 
    { 
     url += '?'; 
    } 

    url += params; 
    } 

    return url; 
} 

grazie!

risposta

5

Dal altre risposte non hanno risposto alla mia domanda, ho fatto alcune prove con la chiamata $.ajax() per vedere come si fonde gli URL con i dati param.

I miei risultati finora:

  • se URL contiene un ?, poi $.ajax() aggiungerà '&' + $.param(data)
  • se non, allora $.ajax() aggiungerà '?' + $.param(data)

Quindi, se io voglio mantenere la mia funzione di elaborazione url coerente con il modo in cui lo fa $.ajax(), quindi dovrebbe essere qualcosa di simile e il seguente:

var addParams = function(url, data) 
    { 
    if (! $.isEmptyObject(data)) 
    { 
     url += (url.indexOf('?') >= 0 ? '&' : '?') + $.param(data); 
    } 

    return url; 
    } 

Mi chiedo ancora se esiste un metodo jQuery incorporato per eseguire questa operazione.

1

Il metodo param genererà una stringa di query per l'utente, ma sarà necessario rimuovere la stringa di query esistente.

var base = "http://example.com/foo/?example=old"; 
 
var data = { 
 
    foo: "hello", 
 
    bar: "world?" 
 
}; 
 
var url = base.replace(/\?.*$/, "") + "?" + jQuery.param(data); 
 
alert(url);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2

You can build query string like this:

getQueryStr = function(obj) { 
    var str = []; 
    for (var p in obj) 
     if (obj.hasOwnProperty(p)) { 
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
     } 
    return str.join("&"); 
} 

console.log(serialize({ 
    param1: "val1", 
    param2: "val2" 
})); 

For recursive :

getQueryStr = function(obj, prefix) { 
    var str = []; 
    for (var p in obj) { 
     if (obj.hasOwnProperty(p)) { 
      var k = prefix ? prefix + "[" + p + "]" : p, 
       v = obj[p]; 
      str.push(typeof v == "object" ? 
       getQueryStr(v, k) : 
       encodeURIComponent(k) + "=" + encodeURIComponent(v)); 
     } 
    } 
    return str.join("&"); 
} 

console.log(serialize({ 
    favfruit: "apple", 
    data: { 
     name: 'js', 
     points: [1, 2, 3] 
    } 
})); 
+1

'Uncaught ReferenceError: serialize is not defined' - e sembra che tu stia ancora reinventando la ruota, solo in modo diverso. – Quentin

+1

come è diverso il metodo 'getQueryStr' da jQuerys '$ .param()'? La mia domanda riguardava l'aggiunta di argomenti a un URL esistente che già contiene una stringa di query. 'Il metodo $ .ajax()' lo gestisce molto bene. – Karolis

2

Sì, è possibile utilizzare la funzione jqueries .param() per fare questo.

jsfiddle demo

var params = { param1:"foo", param2:"bar"}; 
var str = jQuery.param(params); 
alert(str);