PHP foreach 循环和一个 AJAX 调用每个循环

Question

这里已经有人问过这个问题，但我可以看到任何对我有用的答案。我在 Laravel 4:

中有以下代码

<ul class="list-group">
                    @foreach($inboxMsg as $inbox)
                       <li class="list-group-item no-border">

                            <a href="#{{ $inbox->mid }}" id="fragment1g">
                                <span class="no-margin sender center-block"><b>John Doe</b>
                                    <small class="pull-right datestamp"><strong>2:00AM</strong></small>
                                </span>
                                <span>

                                        <strong>{{ $inbox->subject }}</strong> <i class="fa fa-paperclip att"> 3</i>

                                </span>
                            </a>

                        </li>
                    @endforeach

                </ul>

如您所见，我在 URL 中使用 # 传递每条消息的 ID，以防止页面重新加载，在我的 AJAX 中，我尝试获取 #（哈希）之后的值。这是我的 AJAX

<script type="text/javascript">
        $(document).ready(function(){
    $('.list-group-item a').click(function (event) {

  //Check if the URL has value after hash
  if(window.location.hash) {

 //set the value as a variable, and remove the #
 var hash_value = window.location.hash.replace('#', '');

 //show loader
 $('#loader').fadeIn("slow");

 //Proccess data through Ajax
 $.ajax({
                type: "POST",
                url: "{{ URL::route('post-read') }}",
                data: { mid : hash_value },
                cache: false,
                dataTye: "json",
                success: function(data)
                {

                    $('#loader').fadeOut("slow");

                    alert(data["body"]);
                }
            });;



}
});
  })
    </script>

使用此代码可以正常工作，但不正确。它迫使我在提示消息正文之前单击两次，当我单击第二条消息时，它首先显示第一条消息的正文，直到我再次单击它才能看到第二条消息的正文。但是如果没有 Jquery "$('.list-group-item a').click(function (event){" 这一行，ID 将在 #（哈希）之后的 URL 中传递，但 AJAX 调用不起作用。

还有其他方法吗？

Answer 1

使用 event.preventDefault(); 来防止点击 link

后页面重新加载

你可以直接使用一些数据属性

使用属性 $inbox->mid

<a data-id="{{ $inbox->mid }}" id="fragment1g">
     <span class="no-margin sender center-block"><b>John Doe</b>
         <small class="pull-right datestamp"><strong>2:00AM</strong>
         </small>
     </span>
     <span>
             <strong>{{ $inbox->subject }}</strong> <i class="fa fa-paperclip att"> 3</i>
          </span>
</a>


<script type="text/javascript">
        $(document).ready(function(){

            $('.list-group-item a').click(function (event) {
                event.preventDefault();

                    var hash_value = $(this).attr("data-id");

                    //show loader
                    $('#loader').fadeIn("slow");

                    //Proccess data through Ajax
                    $.ajax({
                        type: "POST",
                        url: "{{ URL::route('post-read') }}",
                        data: { mid : hash_value },
                        cache: false,
                        dataTye: "json",
                        success: function(data)
                        {

                            $('#loader').fadeOut("slow");

                            alert(data["body"]);
                        }
                    });

            });
        })
    </script>

Answer 2

不要使用 window.location.hash。您应该在元素中放置正确的 url 并使用 event.preventDefault();

PHP:

<a href="{{ URL::route('post-read', array('mid'=>$inbox->mid)) }}">

JS:

 event.preventDefault();
 $.ajax({
                type: "POST",
                url: $(this).attr('href'),
                cache: false,
                dataTye: "json",
                success: function(data)
                {
                    $('#loader').fadeOut("slow");
                    alert(data["body"]);
                }
            });;

PHP foreach 循环和一个 AJAX 调用每个循环

PHP foreach loop and one AJAX call for each of the loop

javascript

php

ajax

jquery

laravel-4