Question

我想从旧项目中重构以下代码。

$("#foo_div").html('').load('/some/route/', function(){
    // ... 
});

$("#bar_div").html('').load('/some/route/', function(){
    // ... 
});

$("#baz_div").html('').load('/some/route/', function(){
    // ... 
});

代码的作用是进行AJAX调用并得到一些HTML结果，然后将其附加到三个div。结果总是相同的，因此不需要有三个相同的调用。

有没有什么方法可以重写这段代码以便一次运行调用，存储输出然后将它附加到三个div？

我不想使用＆＃34; async＆＃34;所以我正在寻找其他方法来做到这一点。

感谢。

Answer 1

选择所有三个元素并调用load（）

$("#a, #b, #c").html("").load('foo.html', function(){});

Answer 2

您可以使用@RunWith(SpringJUnit4ClassRunner.class) @SpringApplicationConfiguration(classes = TailSourceApplication.class) @DirtiesContext public abstract class TailSourceTests { @Autowired protected Source source; @Autowired protected MessageCollector messageCollector; @IntegrationTest({}) public static class payloadTest extends TailSourceTests { @Test public void otherTest() throws Exception { Message<?> received= messageCollector.forChannel(source.output()).poll(10, TimeUnit.SECONDS); System.out.println("Received ="+received); } @Test public void testSimpleFile() throws Exception { int i = messageCollector.forChannel(source.output()).size(); System.out.println("Size = +"+i); Message<?> received= messageCollector.forChannel(source.output()).poll(10, TimeUnit.SECONDS); for (Iterator<Message<?>> iter = messageCollector.forChannel(source.output()).iterator(); iter.hasNext();) { System.out.println("value ="+iter.next().getPayload()); } System.out.println("RECEIVED = "+received); Assert.notNull(received); } } @SpringBootApplication static class TailSourceApplication { public static void main(String[] args) { SpringApplication.run(TailSourceApplication.class, args); } } }功能执行此操作。见https://api.jquery.com/jquery.get/

jQuery.get

Answer 3

假设这些id用于div，您可以将查询缩减为ID为div的任何_div

$( "div[id$='_div']" ).html('').load('/some/route/', function(){
    // ... 
});

Answer 4

您可以在jQuery选择器

中对ID进行分组

$.ajax( "...", function( data ) {
  $("#foo_div, #bar_div, #bar_div").html(data);
});

重构重复的jQuery代码

4 个答案: