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

我有一个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-to-php文件/同一页面传递数据

PHP返回字符串

div已更改为此字符串

---

通过注册锚点的单击事件（使用class=“movie”）并使用方法发送AJAX请求并替换summary 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;
    });
});

试试这个

   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>

下面是这部电影的摘要

这适用于我，您不需要内联脚本：

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:

函数getSummary（id）
{
$.ajax({
键入：“GET”//post
url:“您的url”，
数据：“id=“+id，//显示为$\u GET['id']@ur backend-side
成功：功能（数据）{
//数据是你的总结
$（'#summary'）.html（数据）；
}
});
}

$（函数（）{
$（'.movie'）。单击（函数（）{
var this_href=$（this.attr（'href'）；
$.ajax({
url:this_href，
类型：'post'，
cache:false，
成功：功能（数据）
{
$（'#summary'）.html（数据）；
}
});
返回false；
});
});

您是在使用jQuery之类的js框架，还是想要一个简单的javascript解决方案？使用

$（“#summary”）.html（“您的文本”）更改div的内容

@Eamorr-但是我怎么才能传递get请求呢？但是我需要传递get请求，并不是每个摘要都有一页。。有一个php文件，它获取电影的ID并从数据库中提取摘要。：-）

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

    }
 });    
 }

  <a href="javascript:void(0);" class="movie" onclick="getmoviename(youridvariable)">
  Name of movie</a>

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

    $(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;
               }
        }); 
    });
 });

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

    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";
    }

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

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