Javascript 使用 ajax、php 和 jQuery 更改 DIV 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6506873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change DIV content using ajax, php and jQuery
提问by Luis
I have a div which contains some text for the database:
我有一个 div，其中包含数据库的一些文本：
<div id="summary">Here is summary of movie</div>
And list of links:
和链接列表：
<a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a>
..
The process should be something like this:
这个过程应该是这样的：
- Click on the link
- Ajax using the url of the link to pass data via GET to php file / same page
- PHP returns string
- The div is changed to this string
- 点击链接
- Ajax 使用链接的 url 通过 GET 将数据传递到 php 文件/同一页面
- PHP 返回字符串
- div改成这个字符串
回答by anasanjaria
<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>
And add onclickevent in your lists
并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>
回答by Darin Dimitrov
You could achieve this quite easily with jQueryby registering for the click event of the anchors (with class="movie") and using the .load()method to send an AJAX request and replace the contents of the summary div:
通过注册锚点的点击事件（使用 class="movie"）并使用该方法发送 AJAX 请求并替换摘要 div 的内容，您可以使用jQuery轻松实现这一点.load()：
$(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;
});
});
回答by thumber nirmal
try this
尝试这个
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);
}
});
}
and you html part is
你的 html 部分是
<a href="javascript:void(0);" class="movie" onclick="getmoviename(youridvariable)">
Name of movie</a>
<div id="summary">Here is summary of movie</div>
回答by zofia
This works for me and you don't need the inline script:
这对我有用，您不需要内联脚本：
Javascript:
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:
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>
The request is sent to testme.php:
请求被发送到 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";
}
回答by Kamil
回答by TECHNOMAN
<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>
回答by user3629613
<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>
