Измените содержимое DIV с помощью ajax, php и jQuery
У меня есть 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 изменяется на эту строку
Ответы
Ответ 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 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;
});
});
Ответ 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
Это работает для меня, и вам не нужен встроенный script:
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>