dongxiequ3724
2015-11-17 19:39
浏览 39

Codeigniter - 使用JQuery ajax刷新多个内容的多个元素?

what I want to achieve is that multiple divs in my view get fill up with different content using ajax at the same time when a button is clicked, let's say something like this:

view:

<div id="one">
</div>

<div id="two">
</div>

<div id="three">
</div>

div one, two and three should be refreshed with different content each one.

my script is:

$("input[type='button']").click(function(){
        var mail= $("#mail").val();
        var password = $("#password").val();

        $.ajax({
              url: '<?php echo base_url()?>index.php/login/theLogin',
              type: 'POST',
              data: {'mail':mail, 'password':password},
              success: function(data) {
                $('div#one').html(data);
                $('div#two').html(data);
                $('div#three').html(data);
            }
          });
      });

controller:

public function theLogin()
{

  $this->load->view("ajax/newContent");
}

newContent.php:

<div id="ajax-one">
one
</div>

<div id="ajax-two">
two
</div>

<div id="ajax-three">
three
</div>

and the result is obviously the three divs in my view get refreshed with three divs (9 divs in total), but I don't want that, I want that div one gets refreshed only with the content of div ajax-one and so on.

I used something like this in my ajax method but no success:

    success: function(data) {

                    $('#one').html($('#ajax-one' , data).html());
                    $('#two').html($('#ajax-two' , data).html());
                    $('#three').html($('#ajax-three' , data).html());

                }

What possible solution could exists to solve this? thanks.

图片转代码服务由CSDN问答提供 功能建议

我想要实现的是我视图中的多个div使用ajax同时填充不同的内容 当点击一个按钮时,让我们这样说:

查看:

 &lt; div id =“one”&gt; \  n&lt; / div&gt; 
 
&lt; div id =“two”&gt; 
&lt; / div&gt; 
 
&lt; div id =“three”&gt; 
&lt; / div&gt; 
  <  / pre> 
 
 

div one,two和three应该刷新每个内容的不同内容。

我的脚本是:

  $(“input [type ='button']”)。click(function(){
 var mail = $(“#mail”)。val(); 
 var password = $(“# 密码“)。val(); 
 
 $ .ajax({
 url:'&lt;?php echo base_url()?&gt; index.php / login / theLogin',
 type:'POST',  
 data:{'mail':mail,'password':password},
 success:function(data){
 $('div#one')。html(data); 
 $('div# 两个')。html(数据); 
 $('div#three')。html(data); 
  } 
}); 
}); 
   
 
 

控制器:

 公共函数theLogin()\  n {
 
 $ this-&gt; load-&gt; view(“ajax / newContent”); 
} 
   
 
 

newContent.php:

 &lt; div id =“ajax-one”&gt; 
one 
&lt; / div&gt; 
 
&lt; div id =“ajax-two”&gt; 
two \  n&lt; / div&gt; 
 
&lt; div id =“ajax-three”&gt; 
three 
&lt; / div&gt; 
   
 
 

结果很明显 我视图中的三个div用三个div(总共9个div)刷新,但我不希望这样,我希望div只用div ajax-one的内容刷新,等等。

我在我的ajax方法中使用了类似的东西,但没有成功:

  success:function(data){
 
 $('#one  ')。html($('#ajax-one',data).html()); 
 $('#two')。html($('#ajax-two',data).html())  ; 
 $('#three')。html($('#ajax-three',data).html()); 
 
} 
   
 
 <  p>可能存在哪种解决方案 解决这个问题? 谢谢。 
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • doulin1867 2015-11-17 20:36
    已采纳

    I would replace the DIVs with the new DIVs. So if you have a parent DIV you can replace the whole thing with the new data.

    Consider this being your initial view:

    <div id="myWrapperDiv">
      <div id="one">
      </div>
    
      <div id="two">
      </div>
    
      <div id="three">
      </div>
    </div>
    

    When your data is returned do this:

    $("#myWrapperDiv").html(data);
    

    UPDATE:

    Since that was not a good option for you I have come up with another possible solution. Personally I would return a JSON array that separated the DIVs, however, I will offer a suggestion to work with your current code. I would split the return into an array and process it from there.

    Let me show you. In the below we split the data on the closing div tags with a limit of 3. Without the limit you will get an empty string at the end of your array. Then we replace the contents of your DIVs with the ajax DIVs. We have to add back the closing div tags since it was removed when we split the data. I hope this helps :).

    var myArray = data.split("</div>",3);
    $("#one").html(myArray[0] + "</div>");
    $("#two").html(myArray[1] + "</div>");
    $("#three").html(myArray[2] + "</div>");
    
    已采纳该答案
    打赏 评论
  • douhan4093 2015-11-18 14:30

    Here is a working fiddle. Change you response data to jQuery object. Hope this is what you need.

    $("input[type='button']").click(function(){
        var data = '<div id="ajax-one"><span>one</span></div><div id="ajax-two">two</div><div id="ajax-three">three</div>';
        var $dataObj = $(data);
        $('#one').html($dataObj[0]);
        $('#two').html($dataObj[1]);
        $('#three').html($dataObj[2]);    
     });
    
    打赏 评论

相关推荐 更多相似问题