在不重新加載頁面的情況下請求內容

-12

我想使用select元素來移動查看我的網站。以下是select選項。在不重新加載頁面的情況下請求內容

HTML：

<select name="select-choice-8" id="select-choice-nc"> 
     <optgroup label="News"> 
      <option value="feature">Fea</option> 
      <option value="current">Current</option> 
      <option value="research">Research</option> 
     </optgroup> 

     <optgroup label="Archive"> 
      <option value="archive">Archive</option> 
     </optgroup> 

     <optgroup label="Video"> 
      <option value="">Video</option> 
     </optgroup> 

     <optgroup label="Submit"> 
      <option value="">Story</option> 
      <option value="">Event</option> 
     </optgroup> 
    </select>

我想使用JavaScript/jQuery的基礎上做一些AJAX調用什麼用戶選擇，以避免重新加載整個頁面（如填充返回AJAX的容器內容）。

我需要一些想法或例子來解決這個問題。

在此先感謝。

來源

2012-07-12 ak1481

沒有人會爲您編寫代碼。查看一些[jQuery教程並閱讀文檔]（http://docs.jquery.com/Main_Page），並在遇到特定問題或問題時回來。 – 2012-07-12 22:09:12

究竟是什麼問題？我的帖子中沒有看到問題。 – jmoerdyk 2012-07-12 22:10:53

我只是想要開始。你能指定我確切的地方看jQuery網站嗎？ – ak1481 2012-07-12 22:12:05

試試這個：http://shaquin.tk/experiments/select-ajax2.html。

HTML：

<select name="select-choice" id="select-choice"> 
    <optgroup label="News"> 
     <option value="feature">Feature</option> 
     <option value="current">Current</option> 
     <option value="research">Research</option> 
    </optgroup> 
    <optgroup label="Archive"> 
     <option value="archive">Archive</option> 
    </optgroup> 
    <optgroup label="Video"> 
     <option value="video">Video</option> 
    </optgroup> 
    <optgroup label="Submit"> 
     <option value="story">Story</option> 
     <option value="event">Event</option> 
    </optgroup> 
</select> 
<div id="article">Please select an article to view.</div>

JS：

var origText = ''; 
$(document).ready(function() { 
    origText = $('#article').text(); 
    $('select').on('change', changed); 
}); 
function changed(e) { 
    $('#article').html('<span class="loading">Loading...</span>'); 
    $('#article').load('content.php', $.param({0: e.target.value, 1: origText})); 
}

PHP：

<?php 
$selected = $_GET[0]; 
$articles = array(
     '' => $_GET[1], 
     'feature' => 'Feature article goes here', 
     'current' => '<p>Lorem ipsum dolor sit amet, denique laetare ... se est Apollonius.</p>', 
     'research' => 'You selected <code>research</code>', 
     'archive' => 'Archives', 
     'video' => '<div style="font-size:48pt;font-weight:bold;font-style:italic;background:red;text-align:center;padding:20px;margin:10px;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;">Video</div>', 
     'story' => 'Submit a story', 
     'event' => 'Submit an event' 
    ); 
$article = $articles[$selected]; 
echo $article; 
?>

CSS（選擇有理）：

body { 
    background: #ccc; 
    text-align: center 
} 
#article { 
    padding: 30px; 
    margin: 20px; 
    text-align: left; 
    background: #eee; 
    text-shadow: 1px 1px #fff; 
    text-shadow: 0 0 3px #fff; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
} 
.loading { 
    text-transform: uppercase; 
    font-size: 15pt; 
    text-shadow: 1px 1px #f00, 1px 2px #f00, 2px 2px #f00, 3px 3px #f00; 
}

在PHP中，你可能會想獲取從數據庫中文字：PHP - MySQLi。

來源

2012-07-12 23:55:45

謝謝Shaquin。我爲此使用ASP.NET MVC。另外，我在Index.cshtml中的視圖文件名可以在加載函數中使用.cshtml擴展文件嗎？ – ak1481 2012-07-13 13:16:40

@ ak1481 - 是的，只要它返回正確的內容即可。 GET參數'0'包含所選選項'value'，GET參數'1'包含原始文本（在被替換之前）。（至少在PHP中，GET參數是'0'和'1'）。 – 2012-07-14 22:03:33

我對jQuery並不熟悉，但您可以找到正確的語法結構。這個想法只是基於您選擇的選項獲取適當的HTML。也就是它的相應價值。

考慮testHTML：

<div id="News"></div> 
<div id="Archive"></div> 
<div id="Video"></div>

和Javascript：

$.each("option").click(function() { 
    var label = $(this).parent.label; 
    var elementToUpdate = $("#" + label); // one of the divs in TestHTML 
    var value = (this).value; 
    var url = "http://mysite.php?id=" + value; 
    var newHTML = $.ajax({ url: url }).done(function(){ 
     elementToUpdate.replaceWith(newHTML); 
    }); 
});

或甚至：

<div id="selectedContent"></div>

而且

$.each("option").click(function() { 
    var elementToUpdate = $("#selectedContent"); // one of the divs in TestHTML 
    var value = (this).value; 
    var url = "http://mysite.php?id=" + value; 
    var newHTML = $.ajax({ url: url }).done(function(){ 
     elementToUpdate.replaceWith(newHTML); 
    }); 
});

來源

2012-07-12 22:41:39 EricG

在不重新加載頁面的情況下請求內容

回答

相關問題