使用 ajax、php 和 jQuery 更改 DIV 内容

Posted 2023-05-08

【中文标题】使用 ajax、php 和 jQuery 更改 DIV 内容

【英文标题】：Change DIV content using ajax, php and jQuery

【发布时间】：2011-09-24 07:31:00

【问题描述】：

我有一个 div，其中包含一些数据库文本：

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

以及链接列表：

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

流程应该是这样的：

点击链接 Ajax 使用链接的 url 通过 GET 将数据传递到 php 文件/同一页面 PHP 返回字符串 div改成这个字符串

【问题讨论】：

您是在使用一些 js 框架，例如 jQuery，还是想要一个普通的 javascript 灵魂？

使用$('#summary').html("Your text");改变一个div的内容

@Eamorr - 但我怎样才能通过获取请求？

【参考方案1】：

<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>

并在您的列表中添加onclick 事件

<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】：

您可以使用jQuery 轻松实现此目的，方法是注册锚点的点击事件（使用 class="movie"）并使用.load() 方法发送 AJAX 请求并替换摘要 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;
    );
);

【讨论】：

但是我需要传递一个 GET 请求，没有每个摘要页面.. 有一个 php 文件可以获取电影的 ID 并从数据库中提取摘要。 :-)

【参考方案3】：

试试这个

   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);

    
 );    
 

而你的 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】：

这对我有用，你不需要内联脚本：

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>

请求发送到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】：

jQuery.load()

$('#summary').load('ajax.php', function() 
  alert('Loaded.');
);

【参考方案6】：

<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>

【参考方案7】：

<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>