Cambiare DIV contenuto utilizzando ajax, php e jQuery

Ho un div che contiene il testo per il database:

<div id="summary">Here is summary of movie</div>

E un elenco di link:

<a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a>
..

Il processo dovrebbe essere qualcosa di simile a questo:

  1. Fare clic sul link
  2. Ajax utilizzando l’url del collegamento per passare i dati via GET a file php /stessa pagina
  3. PHP restituisce la stringa
  4. Il div è cambiato in questa stringa
  • Stai usando qualche js framework come jQuery o volete un semplice javascript soultion?
  • Modificare il contenuto di un div tramite $('#summary').html("Your text");
  • Sì, sto utilizzando jQuery.
  • ma come faccio a passare la richiesta get?
InformationsquelleAutor Luis | 2011-06-28

 

7 Replies
  1. 54
    <script>
    
    function getSummary(id)
    {
       $.ajax({
    
         type: "GET",
         url: 'Your URL',
         data: "id=" + id, //appears as $_GET['id'] @ your backend side
         success: function(data) {
               //data is ur summary
              $('#summary').html(data);
         }
    
       });
    
    }
    </script>

    E aggiungere onclick evento nella tua lista

    <a onclick="getSummary('1')">View Text</a>
    <div id="#summary">This text will be replaced when the onclick event (link is clicked) is triggered.</div>
  2. 7

    Si potrebbe ottenere facilmente con jQuery con la registrazione per l’evento click del ancore (con class=”movie”) e utilizzando il .load() metodo per inviare una richiesta AJAX e sostituire il contenuto della nota di sintesi div:

    $(function() {
        $('.movie').click(function() {
            $('#summary').load(this.href);
    
            //it's important to return false from the click
            //handler in order to cancel the default action
            //of the link which is to redirect to the url and
            //execute the AJAX request
            return false;
        });
    });
    • Ma ho bisogno di passare una richiesta GET, non c’è ogni riassunto di una pagina.. c’è un file php che riceve un ID di film e disegnare il riepilogo dal database. 🙂
    • Qualche suggerimento?
  3. 3

    provare questo

       function getmoviename(id)
       {    
         var p_url= yoururl from where you get movie name,
         jQuery.ajax({
         type: "GET",             
         url: p_url,
         data: "id=" + id,
          success: function(data) {
           $('#summary').html(data);
    
        }
     });    
     }

    e si parte html è

      <a href="javascript:void(0);" class="movie" onclick="getmoviename(youridvariable)">
      Name of movie</a>
    
      <div id="summary">Here is summary of movie</div>
  4. 3

    Questo funziona per me, e non avete bisogno di script inline:

    Javascript:

        $(document).ready(function() {
        $('.showme').bind('click', function() {
    
            var id=$(this).attr("id");
            var num=$(this).attr("class");
            var poststr="request="+num+"&moreinfo="+id;
            $.ajax({
                  url:"testme.php",
                  cache:0,
                  data:poststr,
                  success:function(result){
                         document.getElementById("stuff").innerHTML=result;
                   }
            }); 
        });
     });

    HTML:

        <div class='request_1 showme' id='rating_1'>More stuff 1</div>
        <div class='request_2 showme' id='rating_2'>More stuff 2</div>
        <div class='request_3 showme' id='rating_3'>More stuff 3</div>
    
        <div id="stuff">Here is some stuff that will update when the links above are clicked</div>

    La richiesta viene inviata al testme.php:

        header("Cache-Control: no-cache");
        header("Pragma: nocache");
    
        $request_id = preg_replace("/[^0-9]/","",$_REQUEST['request']);
        $request_moreinfo = preg_replace("/[^0-9]/","",$_REQUEST['moreinfo']);
    
        if($request_id=="1")
        {
            echo "show 1";
        }
        elseif($request_id=="2")
        {
            echo "show 2";
        }
        else
        {
            echo "show 3";
        }
  5. 1
    <script>
    $(function(){
        $('.movie').click(function(){
            var this_href=$(this).attr('href');
            $.ajax({
                url:this_href,
                type:'post',
                cache:false,
                success:function(data)
                {
                    $('#summary').html(data);
                }
            });
            return false;
        });
    });
    </script>
  6. 0
    <script>
    
    function getSummary(id)
    {
       $.ajax({
    
         type: "GET",//post
         url: 'Your URL',
         data: "id="+id, //appears as $_GET['id'] @ ur backend side
         success: function(data) {
               //data is ur summary
              $('#summary').html(data);
         }
    
       });
    
    }
    </script>

Lascia un commento