如何在jQuery中創建多個Ajax調用更高效和有效的方式

我在我的代碼，這3個環節：如何在jQuery中創建多個Ajax調用更高效和有效的方式

<ul> 
<li><a id="link1" href="#">link 1</a></li> 
<li><a id="link2" href="#">link 2</a></li> 
<li><a id="link3" href="#">link 3</a></li> 
</ul>

這是我寫的每一個環節Ajax請求（正如你所看到的相同的代碼是多3次，每次鏈接 - 我想知道如何避免）

$(document).ready(function() { 
    $("a#link1").click(function() { 
     $.get("anothertest.php?q=1", function(data){ 
      $("#phpTestAlon").html(data); 
     }); 
    }); 
    $("a#link2").click(function() { 
     $.get("anothertest.php?q=2", function(data){ 
      $("#phpTestAlon").html(data); 
     }); 
    }); 
    }); 
    $("a#link3").click(function() { 
     $.get("anothertest.php?q=3", function(data){ 
      $("#phpTestAlon").html(data); 
     }); 
    }); 
});

什麼是創建這個代碼，但沒有多重複，使之更有效的方式嗎？有沒有把它寫這樣？：

$獲得（「anothertest.php？Q =」 + theIDofTheElement，功能（數據）{

感謝的一種方式，阿龍

來源

2011-12-03 Alon

添加data-id屬性，你的鏈接，並使用一塊JS的：

<ul> 
    <li><a id="link1" href="#" data-id="1">link 1</a></li> 
    <li><a id="link2" href="#" data-id="2">link 2</a></li> 
    <li><a id="link3" href="#" data-id="3">link 3</a></li> 
</ul>

$("ul li a").click(function() { 
    var idToSend = $(this).data('id'); 

    $.get("anothertest.php?q=" + idToSend, function(data){ 
     $("#phpTestAlon").html(data); 
    }); 
});

本例使用data-id，但你可以使用任何屬性，你想要的，包括id=""。另一個明智的選擇是rel=""。

注意選擇器已更改爲ul li a，以便在一個事件中捕獲所有的<a>點擊。

來源

2011-12-03 23:05:50 Bojangles

爲什麼不把網址放在'href'中而不是使用任何'data- *'？ –

@AmirRaminfar因爲然後瀏覽器認爲''指向'http：// thedomain/1'，如果我們有'href =「1」';它將它視爲正常的鏈接。 – Bojangles

根本不是我的意思。看看我的答案。我會把整個url放在href中，就像'href =「anothertest.php？q = 2」'一樣。代碼較少。更好的可用性。如果js被禁用，仍然有效。每個人都快樂。 –

你可以做

$("ul li a").click(function() { 
     e.preventDefault() 
     $.get(this.href, function(data){ 
      $("#phpTestAlon").html(data); 
     }); 
    });

有了這個HTML：

<ul> 
<li><a id="link1" href="anothertest.php?q=1">link 1</a></li> 
<li><a id="link2" href="anothertest.php?q=2">link 2</a></li> 
<li><a id="link3" href="anothertest.php?q=3">link 3</a></li> 
</ul>

如果javascript被禁用，這個解決方案也可以工作。 return false將確保js是否啓用不實際轉到不同的頁面。但是，如果js被禁用，那麼用戶只會去他們點擊的任何鏈接。

來源

2011-12-03 23:05:22

'回報FALSE'是壞的。你爲什麼不使用'e.preventDefault（）'？ – Bojangles

爲什麼它不好？我實際上發現這更容易閱讀。 –

[這是不好的（http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/），並且它不是;我在你的回答中沒有看到e.preventDefault（）。 – Bojangles

var theIDofTheElement = $(this).attr('id').match(/\d$/)[0];

來源

2011-12-03 23:09:20 zoli

這是OP描述的問題的解決方案，但最好是解決問題的原因，而不是解決問題本身。沒有不敬，只是一些友好的建議:-) – Bojangles

如何在jQuery中創建多個Ajax調用更高效和有效的方式

回答

相關問題