Измените содержимое 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> .. 

Процесс должен быть примерно таким:

  1. Нажмите ссылку
  2. Ajax, используя URL-адрес ссылки для передачи данных через GET в php-файл / одну страницу
  3. PHP возвращает строку
  4. Div изменяется на эту строку

Related of "Измените содержимое DIV с помощью ajax, php и jQuery"

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

Вы можете легко достичь этого с помощью jQuery , зарегистрировавшись для события щелчка якорей (с классом = «фильм») и используя метод .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; }); }); 

попробуй это

  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:

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

jQuery.load ()

 $('#summary').load('ajax.php', function() { alert('Loaded.'); }); 
 <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>